Html.map + blur event on DOM removal makes impossible states possible

[zwilias]

SSCCE

https://ellie-app.com/3Fs3Jr2XMPpa1/0

Problem

Chrome triggers a blur event when removing a DOM node that has focus. If that DOM node happens to be the child of a node that is subject to a p-tagger patch, then the tagger will have changed by the time the DOM node is removed and, hence, get tagged with the wrong tagger.

Firefox has had a bug open for the past 7 years to add the same behaviour (https://bugzilla.mozilla.org/show_bug.cgi?id=559561)

Other browsers don't seem to exhibit this behaviour. The spec is quite vague on what this should do.

Workarounds

• ensuring the number of taggers is different. This can be done using Html.map identity.
• ensuring the Html.map tree isn't reused by using Html.Keyed nodes.

---

Possible solutions include:

• removing all eventlisteners before removing a node.
• reverting to p-redraw if the taggers changed at all.

This is issue was already (partially) reported in #73 but doesn't really have anything to do with Html.lazy. Since it came up today in Slack, I figured I'd investigate a little and report my findings here.

[process-bot]

Thanks for the issue! Make sure it satisfies this checklist. My human colleagues will appreciate it!

Here is what to expect next, and if anyone wants to comment, keep these things in mind.

[evancz]

I am tracking all of the VirtualDom.map ideas in #105 so that it is clearer how to make coherent changes.

I'll close here, cleaning up the issue queue. The idea is that this content is all available for reference, but easier for me to find. Point is, thanks for the report!

[zwilias]

The same situation can occur with an onMouseLeave - if the mouse is hovering such an element when patching occurs, the element disappearing can trigger onMouseLeave.

[bardt]

Caught the same issue. Here is a repo with another minimal example https://github.com/bardt/elm-impossible-msg and a branch demonstrating how this can result in a runtime exception https://github.com/bardt/elm-impossible-msg/tree/runtime-exception. Hope this helps.

[empeje]

I found the same issue as well, how is the status of this?

cc: @evancz

[empeje]

@zwilias concretely, what do you mean by this?

Workarounds

• ensuring the number of taggers is different. This can be done using Html.map identity.
• ensuring the Html.map tree isn't reused by using Html.Keyed nodes.

I'm using onBlur and Html.map, and it brokes my back button on my SPA.

[MethodGrab]

Here's an example of how to use Html.map identity as a workaround in case anyone else has this issue: https://ellie-app.com/8gxxTz6gnhXa1

[cmditch]

Ran into this issue as well with on "focusout" Here is an SSCCE https://github.com/cmditch/elm-msg-bug.