Ionic-framework: bug: ion-textarea input is reversed (rtl) on windows

[tmwrnr]

Bug Report

Ionic version:

[x] 4.7.1

Current behavior:

If I type in a ion-textarea on Windows (Cordova) a text, the input is displayed and saved reversed. This means if Itype in This is a test the output is tset a si sihT. I tried to force the direction with CSS to ltr but this has no effect. This bug only appears on Windows.

ion-textarea {
    direction: ltr !important;
    unicode-bidi: bidi-override !important;
}

Expected behavior:

If I type in This is a test I expect the output to be the same.

Steps to reproduce:

1. Create a Template with an ion-textarea in it
2. Create a Windows build ionic cordova build windows
3. Run the app with Visual Studio
4. Type in a text into the ion-textarea

Other information:

Issue 17012 may be related

Ionic info:

Ionic:

   Ionic CLI                     : 5.2.3 (C:\Users\...\AppData\Roaming\nvm\v10.15.3\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.7.1
   @angular-devkit/build-angular : 0.12.3
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.2.4
   @ionic/angular-toolkit        : 1.4.0

Capacitor:

   Capacitor CLI   : 1.1.1
   @capacitor/core : 1.1.1

Cordova:

   Cordova CLI       : 8.1.2 ([email protected])
   Cordova Platforms : not available
   Cordova Plugins   : no whitelisted plugins (13 plugins total)

Utility:

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

System:

   NodeJS : v10.15.3 (C:\Program Files\nodejs\node.exe)
   npm    : 6.4.1
   OS     : Windows 10

[Jahrenski]

I've had some complaints about this by a few windows customers but we had a hard time to reproduce. Is this happening systematically?

[tmwrnr]

Yes this is happening systematically on multiple devices.

[AtlasCook]

I am also having this issue. ion-textarea works perfectly in the Chrome browser. However, in the Edge browser, the cursor jumps to the beginning of the textarea each time a key is pressed. This cursor jumping reverses the input as stated in the original post.

My setup is below:

Ionic:
Ionic CLI : 5.2.4
Ionic Framework : @ionic/angular 4.7.4
@angular-devkit/build-angular : 0.801.3
@angular-devkit/schematics : 8.2.0
@angular/cli : 8.2.0
@ionic/angular-toolkit : 2.0.0

Cordova:
Cordova CLI : 9.0.0 ([email protected])
Cordova Platforms : browser 6.0.0
Cordova Plugins : no whitelisted plugins (5 plugins total)

Utility:
cordova-res : 0.6.0
native-run : 0.2.8

System:
NodeJS : v10.16.0 (C:\Program Filesnodejsnode.exe)
npm : 6.9.0
OS : Windows 10

[tmwrnr]

Thank you @AtlasCook, I can confirm that this is also happening in Edge.

[NisStrom]

+1

[vagelisne]

If you are looking for a workaround, here are my two cents. On ionFocus event the following method is called for all ion-textarea elements.

moveCursorToEnd(event) {
    const isIEOrEdge = /msie\s|trident\/|edge\//i.test(window.navigator.userAgent);
    if (isIEOrEdge) {
      const textarea: HTMLTextAreaElement = event.target.firstChild;
      textarea.value = 'a';
      textarea.setSelectionRange(textarea.value.length, textarea.value.length);
      textarea.value = '';
    }
}

[stilnox255]

+1

also, this seems to be the same issue as https://github.com/ionic-team/ionic/issues/19614

[tmwrnr]

@vagelisne thank you for your suggestion, I will try this out 👍

[1Apar]

Just a small adjustment in @vagelisne workaround: When the textarea element regains the focus, the current workaround will clear any already existing text. In order to keep the existing text and place the cursor to the end , we've added the else check like that
``` moveCursorToEnd(event) {
const isIEOrEdge = /msie\s|trident\/|edge\//i.test(window.navigator.userAgent);
if (isIEOrEdge) {
const textarea: HTMLTextAreaElement = event.target.firstChild;
const existingText = textarea.value;
if (textarea.value.length === 0) {
textarea.value = 'a';
textarea.setSelectionRange(textarea.value.length, textarea.value.length);
textarea.value = '';
} else {
textarea.setSelectionRange(textarea.value.length, textarea.value.length);
textarea.value = '';
textarea.value = existingText;
}
}
}

[pjc2007]

Also just notice this (on Windows Cordova build, and if running Ionic serve in Edge)

[pjc2007]

@vagelisne @1Apar - thanks, this workaround appears to work perfectly for me

[liamdebeasi]

Thanks for the issue. I am going to close this as we recently released Ionic Framework v5 which dropped support for IE11 and older versions of Edge. Moving forward, Ionic Framework v4 will only receive critical security patches.

[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.