redraw() getting called twice in the same tick on unmounting a view

[iainmcampbell]

moved from #1888. repro: https://jsfiddle.net/qhprw0ku/7/

The exact error is Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is no longer a child of this node. Perhaps it was moved in a 'blur' event handler? I only get an error in Chrome 59, not Firefox 54 or Safari 10.

To reproduce: create an <input>, add onfocus and onblur handlers, that add/remove a keydown event, that triggers a route change.

analysis from @pygy:

it may be due to the fact that m.route calls run directly, and then the onblur event fires and triggers a sync redraw, since redraw is unaware of the run() call

That is fixed in #1592 since run() is only called at mount time. After the first call m.redraw() takes over.

https://github.com/MithrilJS/mithril.js/pull/1592/files#diff-63de04924f7fd5b53de072769e289dfbR17

[pygy]

The sequence is:

• m.route.set() => schedule a route change.
• route resolution machinery => direct call to m.render() (through run()) => remove the input, trigger onblur => causes a redraw() with calls m.render() synchronously as the previous call hasn't returned.

Nested render() calls on the same root === sadness.

[dead-claudia]

No longer throwing errors in mithril@next.

[cmawhorter]

to anyone else experiencing this on 1.x (no idea if it's fixed in v2?) --

repro:

• input[type=text] with onblur that calls m.redraw
• focus the input
• click on a button/whatever that does a route change

OPs error is thrown and the app falls down.

i couldn't come up with anything that fixed the issue in removeNodeFromDOM.

since the issue is blur specific, i added a flag for when any blur handler was active and prevented redraws (rescheduled them next tick). this fixes the issue and allows m.redraw to continue to work. ...though i'm working on my own v1 fork so YMMV.