Annoying behavior due to conflict in ONS-INPUT (onsen) and NG-MODEL (angular)

[CNaik]

Hi Team,

Look at this sample that I have exported to CodePen from your interactive tutorial itself. I have removed unnecessary parts and just kept input component.

https://codepen.io/CNaik/pen/WoqmwN?editors=1010

(NOTE: this behavior happens in Chrome) Write something in input text and then try editing it from somewhere in middle. Your cursor will jump to the end as soon as you add/remove very first character.

The problem fixes if we either use just input instead of ons-input OR if we remove ng-model. But unfortunately we need both of them.

Kindly look into this and let me know the workaround as this is very annoying to end users especially when text is long.

Regards,
CNaik.

[munsterlander]

@CNaik I am not certain of the issue and I do think it has to do with Angular more than Onsen or Onsen’s implementation maybe, but Vue.JS does not have this issue as demonstrated in this quick example: https://codepen.io/munsterlander/pen/rWWvNN

[CNaik]

@munsterlander Thank you for your reply.

Yes, it’s not a problem when either Onsen OR Angular are in action. If I use just <input> instead of <ons-input> keeping ng-model in place then it works fine. Similary if I just remove ng-model keeping <ons-input> in place then also it works fine.

So the problem is when both ( Onsen & Angular ) of them are used together. And that too only in Chrome.

I have seen it’s working with Vue.js but that’s not the way for us now as the whole project is already developed using Onsen and Angular.

Regards,
CNaik.

[munsterlander]

@CNaik Totally agree, I was trying to illustrate its the Onsen implementation of angular on an input and not core Onsen, etc. I fully suspect this line in https://unpkg.com/onsenui@2.0.5/js/angular-onsenui.js:

if (attrs.ngModel) {
          scope.$watch(attrs.ngModel, function (value) {
            if (el._isTextInput && typeof value !== 'undefined') {
              el.value = value;

Specifically, how I interpret this, is that when you set el.value = value; it is overwriting all the contents every time and thus the browser will almost always set the focus at the end of the string. I would think you just want to change the model data and not change the elements value every time. Basically, reverse the line, etc., but I am not an Angular user.

[CNaik]

@munsterlander You are right. I commented the line el.value = value and it started working fine.

Logically, removing the assignment seems absolutely fine BUT still I went with a safe approach considering Onsen team might have some other considerations too.

I have added a condition like below, and it is working fine.

if(el.value !== value)
el.value = value;

Thank you very much for helping me out on this issue.

Regards,
CNaik.

[CNaik]

I believe, Onsen Team, if watching these threads may want to fix the issue in current source.

Regards,
CNaik.

[munsterlander]

@CNaik Glad you got it working. I will open a github on it to see if this is the appropriate change to make as I am unsure of the unintended consequences. The team will have to way in on it.

[Rork]

Hello,
I have a similar problem, except that it happens with pure JavaScript on Firefox.
If I try to click in the middle of a <ons-input> the cursor is always stuck at the end of the text field…
Is there a way to get around this?
Thanks.

[Fran Diox]

@CNaik @munsterlander Oops, somehow I missed this thread. I fixed the OP issue last week for Angular1, Angular2 and Vue. It’s been fixed actually in the same way.

I think @Rork issue is completely different and is due to a recent update in Firefox. It was fixed here.

All of this will be released in v2.2.0, hopefully early this week.

[munsterlander]

@Fran-Diox Thanks for the feedback. I was going nuts as I could not find anything in the JS that would be causing @Rork’s issue . Interesting that the Moz fix is CSS.

[Fran Diox]

@munsterlander For some reason, looks like -webkit-user-select: auto; started affecting (and breaking) Firefox in a recent version…

[Rork]

I tested with the latest version 2.2.0 but unfortunately this does not fix the problem for me.
On Firefox it’s not possible to move the cursor or to select any text in the ons-input element.
Should I file a bug report?

[Fran Diox]

@Rork Looks like another property in the new CSS components is overwriting that one… I just changed it again and it should be definitely fixed. For now you can add input { -moz-user-select: text !important; } to your app. For some reason, auto value doesn’t work as before in Firefox.

[Rork]

@Fran-Diox Thanks!