Material: Ionic & ngMaterial bug: place cursor in between text on input field not working

[robindierckx]

Actual Behavior:

• What is the issue? * In Ionic, on android, it's not possible to move cursor in between text on input fields. The issue described here, solved a few months ago, re-appears on android touch devices (not on browsers) when including ngMaterial.

Steps to reproduce the issue:

1. start an ionic project, include ngMaterial, create an android platform
2. add an input field or text area:
3. connect your android device and start the app "ionic run android" on a touch-device
4. on your touch-device type text (e.g., "hello world") in your text area. Try with your finger to put the cursor between two letters you just typed (e.g., between letter 5 and letter 6) => it doesn't work: the cursor stays where it is at the end where you finished typing.
5. remove ngMaterial, and you'll have the expected behavior with the cursor moving as expected.

Angular Versions: *

• Angular Version: 1.5.3
• Angular Material Version:1.1.1

Additional Information:

• Browser Type: *Ionic on samsung tab E (or any other android touch device)
• Browser Version: *ionic 1.3.1
• OS: * Android

Actual Behavior:

• What is the issue? * In Ionic, on android, it's not possible to move cursor in between text on input fields. The issue described here, solved a few months ago, re-appears on android (not on browsers) when including ngMaterial.

Steps to reproduce the issue:

1. start an ionic project, include ngMaterial, create an android platform
2. add an input field or text area:
3. connect your android device and start the app "ionic run android" on a touch-device
4. on your touch-device type text (e.g., "hello world") in your text area. Try with your finger to put the cursor between two letters you just typed (e.g., between letter 5 and letter 6) => it doesn't work: the cursor stays where it is at the end where you finished typing.

Angular Versions: *

• Angular Version: 1.5.3
• Angular Material Version:1.1.1

Additional Information:

• Browser Type: *Ionic on samsung tab E (or any other android touch device)
• Browser Version: *ionic 1.3.1
• OS: * Android

[robindierckx]

Solution Found!
Inspired by the solution of this similar ionic issue, I commented out ev.preventDefault() in the mouseInputHijacker(ev) function of angular-material.js and the bug is gone.

  function mouseInputHijacker(ev) {
    var isKeyClick = !ev.clientX && !ev.clientY;
    if (!isKeyClick && !ev.$material && !ev.isIonicTap
      && !isInputEventFromLabelClick(ev)) {
      //ev.preventDefault(); => When commenting out this line the bug disappears (line 2669 in angular-material.js)
      ev.stopPropagation();
    }
  }

I have no idea whether removing this line could cause new bugs or not ? (it did not in the mentionned issue)
I am not familiar with testing and creating a pull request for such an important package.

Could someone help me with that?

[robindierckx]

Another workaround without altering the ngMaterial source code. Add this to your config :

.config(function($mdGestureProvider) {
  $mdGestureProvider.skipClickHijack();
}))

As described in this ionic issue this also solves other ionic issues.

[gmanriqueUy]

@robindierckx Do you know if there are any side effect of skipping hijacking?

[robindierckx]

no idea, sorry. I did not experience any trouble though.

[gmanriqueUy]

That's ok. Thanks for the quick response!

[Splaktar]

The solution in https://github.com/angular/material/issues/10058#issuecomment-263690370 seems like the best way to go here w/o risking any breaking changes to AngularJS Material.