bug: ion-textarea Text Selection Not Persisting on Safari

[AdrienJacquard]

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

v6.x, v7.x

Current Behavior

• When attempting to select text within an ion-textarea on Safari (both iOS and macOS versions), the text is briefly highlighted as expected, but then the highlight disappears almost immediately. This suggests that while the text selection is initially successful, something causes the selection to be cleared shortly afterwards.
• This issue does not occur on Chrome, where text selection within an ion-textarea works as expected and persists until the user deselects it.

Expected Behavior

• When a user focuses on an ion-textarea and triggers the selectText() method (for instance, by tapping or clicking into the text area), the entire text within the ion-textarea should be selected and highlighted. This selection should persist until the user explicitly deselects it or begins typing.
• The expected behavior should be consistent across all browsers, including Safari, ensuring a uniform experience for all users regardless of their browser choice.

Steps to Reproduce

1. Open an Ionic application that includes an ion-textarea element with predefined text, running on Ionic 6 or 7, in Safari on either an iOS or macOS device.
2. Implement a method that selects the text within the ion-textarea upon the element gaining focus, similar to the provided selectText() method.
3. Run the application and focus on the ion-textarea either by tapping (on iOS) or clicking (on macOS) to trigger the text selection.
4. Observe that the text within the ion-textarea is briefly selected before the selection is cleared, differing from the behavior observed in other browsers like Chrome.

Code Reproduction URL

https://stackblitz.com/edit/ionic-textarea-select

Ionic Info

Ionic:

   Ionic CLI                     : 7.2.0
   Ionic Framework               : @ionic/angular 7.6.6
   @angular-devkit/build-angular : 17.1.1
   @angular-devkit/schematics    : 17.1.1
   @angular/cli                  : 17.1.1
   @ionic/angular-toolkit        : 11.0.0

Capacitor:

   Capacitor CLI      : 5.6.0
   @capacitor/android : 5.6.0
   @capacitor/core    : 5.6.0
   @capacitor/ios     : 5.6.0

Cordova:

   Cordova CLI       : not installed
   Cordova Platforms : not available
   Cordova Plugins   : not available

Utility:

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

System:

   NodeJS : v20.10.0 (C:\Program Files\nodejs\node.exe)
   npm    : 10.2.3
   OS     : Windows 10

Additional Information

No response

[mapsandapps]

Hi! Thanks for the bug report. This appears to be a bug in WebKit, probably this one. (Text doesn't get/stay focused when using .select() on a text field in Safari.)

[AdrienJacquard]

Thank you for your feedback @mapsandapps but are you sure it's the same issue ? Cause if I don't use the ion-textarea component and use textarea instead it work as expected OR if I wrap my select with a setTimeout of 50 ms it also work.

Exemple:

  public selectText(): void {
    setTimeout(() => {
      this.textArea.getInputElement().then((input) => input.select());
    }, 50);
  }

Could it not be a race condition ? As you can see on demo provided above when clicking in the input it briefly select all of the text for a very brief moment. And then unselect. Your webkit issue don't mention that and instead mention that it is never focus.

cc: @cconti1

[AdrienJacquard]

Hello @mapsandapps, can we have that one review one more time by any chance ? I don't believe it's an external bug since the WebKit you provided above is not really related, thanks.

[mapsandapps]

Hi @AdrienJacquard,

I'm able to reproduce this with the native textarea without Ionic Framework. You can take a look at this stackblitz and see that the issue reproduces in Safari but not Chrome.