Ionic-framework: Tap on textarea border opens keyboard but textarea is not focussed

Created on 18 Mar 2016  路  8Comments  路  Source: ionic-team/ionic-framework

Note: for support questions, please use one of these channels:

https://forum.ionicframework.com/
http://ionicworldwide.herokuapp.com/

Short description of the problem:

When clicking on the border/outer edge of a textarea in a footer bar, the keyboard opens but the textarea is not focussed. This is strange because the keyboard is supposed to open on textarea focus. Therefore, I'd expect the textarea to be always focussed when the keyboard shows up. To close the keyboard, you must then first tap again the textarea so that it is focussed, and afterwards the ion-content area to unfocus and close the keyboard.

Analysis shows that the keyboard registers the tap and opens (keyboard plugin being used) but the textarea does not receive focus. Both ng-focus or a custom directive binding element.on('focus') do not get triggered (qy-detect-focus).

A video of this issue can be downloaded here, first open when tapped into the textarea, second open when tapped on textarea border, textarea does not receive focus: https://dl.dropboxusercontent.com/u/22622235/textarea.mov

What behavior are you expecting?

The textarea gets focus, the cursor is placed into the textarea and the keyboard opens. In other words, if the keyboard opens, the tapped element should receive focus.

Steps to reproduce:
I have created a simple repository based on the tabs-starter project. In tab "Dash" there is an ion-footer-bar containing a textarea. Tapping the textarea mostly focusses it, when tapping the textarea border however does not.

https://github.com/leschirmeur/textareaApp

insert any relevant code between the above and below backticks

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)
Occuring on iOS 8 and 9, Android not tested.

Tapping on the textarea edge opens the keyboard. When putting a console.log into the function tapHandleFocus(ele) in line 3112 of ionic.bundle.js, the else block in line 3135 logs element as being the tapped one! So, to me it seems the keyboard opens although the was tapped and not the textarea, just very close to it.

Which Ionic Version? 1.x or 2.x
1.2.4

Run ionic info from terminal/cmd prompt: (paste output below)
Your system information:

Cordova CLI: 5.4.1
Gulp version: CLI version 3.9.0
Gulp local:
Ionic Version: 1.2.4
Ionic CLI Version: 1.7.14
Ionic App Lib Version: 0.7.0
ios-deploy version: 1.8.4
ios-sim version: 5.0.6
OS: Mac OS X El Capitan
Node Version: v0.12.7
Xcode version: Xcode 7.2.1 Build version 7C1002

Most helpful comment

I'm having the same issue here. Happens only on iOS (tested on iOS 9.3).

Cordova CLI: Not installed
Gulp version: CLI version 3.8.11
Gulp local: Local version 3.8.11
Ionic Version: 1.0.0-rc.3
Ionic CLI Version: 1.7.14
Ionic App Lib Version: 0.7.0
ios-deploy version: Not installed
ios-sim version: 3.1.1
OS: Mac OS X El Capitan
Node Version: v0.12.1
Xcode version: Xcode 7.2 Build version 7C68

All 8 comments

Hello! Are you still having this issue? Thanks!

Yes

I'm having the same issue here. Happens only on iOS (tested on iOS 9.3).

Cordova CLI: Not installed
Gulp version: CLI version 3.8.11
Gulp local: Local version 3.8.11
Ionic Version: 1.0.0-rc.3
Ionic CLI Version: 1.7.14
Ionic App Lib Version: 0.7.0
ios-deploy version: Not installed
ios-sim version: 3.1.1
OS: Mac OS X El Capitan
Node Version: v0.12.1
Xcode version: Xcode 7.2 Build version 7C68

+1
i got same problem...

+1

This issue was moved to driftyco/ionic-v1#160

Wow, someone has exactly the same issue I am facing now. What's the status currently? Are there already any solutions present?

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

vswarte picture vswarte  路  3Comments

alexbainbridge picture alexbainbridge  路  3Comments

alan-agius4 picture alan-agius4  路  3Comments

brandyscarney picture brandyscarney  路  3Comments

masimplo picture masimplo  路  3Comments