Html.input [ onInput Msg ] doesn't dispatch messages when a browser plugin add dom elements on top of it

[jcornaz]

Hello,

Using the example provided in the doc: https://elm-lang.org/examples/forms

Text fields are messed up and totally unusable. Most of the time, just nothing happen, and some other time the value goes to another field...

I found a work around: Wrap the input into a div.

So changing viewInput implementation from:

viewInput t p v toMsg =
  input [ type_ t, placeholder p, value v, onInput toMsg ] []

To:

viewInput t p v toMsg =
  div [] [ [ input [ type_ t, placeholder p, value v, onInput toMsg ] [] ]

Solves the problem. (however, also change the render...)

I'm using:

• Chrome 77.0.3865.120
• Linux 5.3.6-1-MANJARO x86_64

(Note that it is not an issue of the online sandbox. I get the same problem when compiling locally)

UPDATE: It works well on firefox

UPDATE2: It does not work better on firefox. It is caused by a browser plugin that add new dom elements on top of said input field

[zwilias]

It works fine for me on that exact same version of Chrome on OSX.

Can you check if you have any extensions enabled that might be messing with the DOM? Assuming you haven't set any extensions to be enabled in private browsing mode, can you verify that this also breaks for you when using private browsing mode?

[jcornaz]

@zwilias

Yes! I found that the 1password plugin is problematic.

It worked with firefox only because I didn't have the plugin installed on it. But I just reproduced the same problem using Firefox.

It is very problematic though. It is the first time I have a problem due to that plugin. It works quite well with every site. And creating a register/login form while saying to the user : "You cannot use a password bank" is really a no go for me. I know not all password banks need a plugin that touch the dom. But the most user-friendly ones do...