bug: textarea does not always scroll from under keyboard on programatic focus on iOS

[duane-j-wagner]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• [ ] v4.x
• [ ] v5.x
• [X] v6.x
• [ ] Nightly

Current Behavior

When a list of ion-items is made in a way to allow inline editing with an ion-textarea and an edit button is pressed. The code shows the text area and sets focus, but if the on-screen keyboard pops up over the text area, it fails to scroll into view. It works on Android, but not iOS.

A similar issue was marked as fixed in Ionic 4, but this is a bit different and a problem in Ionic 6. https://github.com/ionic-team/ionic-framework/issues/17847

Expected Behavior

Text area should scroll into view on touching the edit button.

Steps to Reproduce

The demo code is a slightly modified version of the Ionic list starter

• clone the demo code
• in a terminal: cd
• enter: ionic run capacitor ios choose a real iOS device so the onscreen keyboard will activate on focus.
• push edit button near bottom of screen notice the focussed text area is hidden.

Code Reproduction URL

https://github.com/duane-j-wagner/textareatest

Ionic Info

       Require stack:
       - /Users/djwagner/.nvm/versions/node/v18.2.0/lib/node_modules/@ionic/cli/lib/project/index.js
       - /Users/djwagner/.nvm/versions/node/v18.2.0/lib/node_modules/@ionic/cli/lib/index.js
       - /Users/djwagner/.nvm/versions/node/v18.2.0/lib/node_modules/@ionic/cli/index.js
       - /Users/djwagner/.nvm/versions/node/v18.2.0/lib/node_modules/@ionic/cli/bin/ionic

Ionic:

   Ionic CLI                     : 6.19.1 (/Users/djwagner/.nvm/versions/node/v18.2.0/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 6.1.6
   @angular-devkit/build-angular : 13.2.6
   @angular-devkit/schematics    : 13.2.6
   @angular/cli                  : 13.2.6
   @ionic/angular-toolkit        : 6.1.0

Capacitor:

   Capacitor CLI      : 3.5.1
   @capacitor/android : not installed
   @capacitor/core    : 3.5.1
   @capacitor/ios     : 3.5.1

Utility:

   cordova-res : 0.15.4
   native-run  : 1.6.0

System:

   NodeJS : v18.2.0 (/Users/djwagner/.nvm/versions/node/v18.2.0/bin/node)
   npm    : 8.9.0
   OS     : macOS Monterey

Additional Information

The demo also has a hack to get the setFocus call to work. It shouldn't need the timer.

[liamdebeasi]

Thanks for the issue. I can reproduce this behavior. I need to dig into this a bit more to see if this is an Ionic bug.

[liamdebeasi]

Explicitly tapping the textarea seems work fairly consistently, but programmatically focusing is flaky when it comes to scrolling the textarea into view.

[ezequiel88]

Same problem

[liamdebeasi]

Hi everyone,

Does this issue still reproduce in Ionic 7?

[duane-j-wagner]

I upgraded my test project to ionic 7.0.3 and it works bug free :)

[liamdebeasi]

Glad to hear the issue is resolved! I am going to close this, but let me know if you have questions. For those looking to upgrade to Ionic 7, here is a migration guide: https://ionicframework.com/docs/updating/7-0

[ionitron-bot[bot]]

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.