ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
51.01k stars 13.51k forks source link

bug(angular): ion-textarea loses focus switching desktop windows #26947

Closed ericis closed 1 year ago

ericis commented 1 year ago

Prerequisites

Ionic Framework Version

v6.x

Current Behavior

On a Windows desktop, when scrolling down to and selecting an <ion-textarea ...> that is displayed in an <ion-split-pane><ion-menu><ion-content><ion-list>...<ion-item> and then switching to another application and back again (e.g. Alt-Tab), the textarea has lost focus entirely and the view has automatically scrolled to the top.

Expected Behavior

Focus remains on the <ion-textarea ...>.

Steps to Reproduce

  1. On Windows (11 Pro)
  2. In an Ionic Angular application version 6.5.3
  3. Build an <ion-split-pane><ion-menu><ion-content><ion-list>...<ion-item><ion-textarea...>..., where the textarea is located below several list items and below the initial view, requiring scrolling
  4. Add some content to the split pane as well <ion-split-pane><div><ion-header>...</ion-header><ion-content...>...</ion-content>...
  5. In a browser (e.g. Firefox), scroll down to and select the <ion-textarea> and type some characters
  6. Switch to another application using the Alt-Tab keyboard sequence
  7. Switch back to the browser
  8. Notice the textarea has lost focus and the view has automatically scrolled back to the top

Code Reproduction URL

No response

Ionic Info

$ ionic info

Ionic:

Ionic CLI : 6.20.8 Ionic Framework : @ionic/angular 6.5.3 @angular-devkit/build-angular : 15.1.5 @angular-devkit/schematics : 14.2.10 @angular/cli : 15.1.5 @ionic/angular-toolkit : 7.0.0

Capacitor:

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

Utility:

cordova-res : not installed globally native-run : 1.7.1

System:

NodeJS : v18.12.1 (C:\Program Files\nodejs\node.exe) npm : 9.1.2 OS : Windows 10

Additional Information

I have discovered many sources from several years ago that refer to issues and code examples covering textarea-related things like iOS and Safari, mobile keyboard display and viewport resizing, calling setFocus(), etc. But, none of these seem to be directly related to an issue like this.

ionitron-bot[bot] commented 1 year ago

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

averyjohnston commented 1 year ago

This issue is being closed due to insufficient reproduction. If this is still a problem in the latest version of Ionic, please open a new issue and ensure the template is fully filled out. Thank you!