Tap on textarea outer edge opens keyboard but textarea is not focussed sometimes

Short description of the problem:

When clicking on the outer edge of a textarea, the keyboard opens but the textarea is sometimes not focussed. This is somehow 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 fire a focus event. Both ng-focus or a custom directive binding element.on(‘focus’) do not get triggered.

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 fire a ‘focus’ event.

Steps to reproduce: This happens in a production app which is available in the App Store. To easily 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, sometimes not, especially when tapping along the textarea edges: https://github.com/leschirmeur/textareaApp

Ionic Version: 1.x / 2.x 1.2.4

Browser & Operating System: iOS / Android / Chrome iOS 8 and 9

Run ionic info from terminal/cmd prompt:

Your system information:

Cordova CLI: 5.4.1
Gulp version:  CLI version 3.9.0
Gulp local:   Local version 3.9.0
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 (wrongly detected, running on OS X Yosemite)
Node Version: v0.12.7
Xcode version: Xcode 7.2.1 Build version 7C1002

[SebastianSchirmer]

Good luck

[aycron-dev]

Thanks for this answer! I’m implementing this now.