Monaca Onsen UI Discord Chat Github Repo

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



  • @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.



  • @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.



  • @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.



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

    Regards,
    CNaik.



  • @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.



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


  • Onsen UI

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



  • @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.


  • Onsen UI

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



  • 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?


  • Onsen UI

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



  • @Fran-Diox Thanks!