Non-bubbling event handler stops working after redraw

[lolgesten]

It seems like non-bubbling event handlers are not added back to the DOM when underlying DOM nodes are removed/re-added.

Code to reproduce the issue:

const xs = require('xstream').default;
const {button, form, makeDOMDriver} = require('@cycle/dom');
const {run} = require('@cycle/run');

function main(sources) {

  const formSubmit$ = sources.DOM.select('form')
    .events('submit', { preventDefault: true })
    .mapTo({});

  const notformClick$ = sources.DOM.select('.notform')
    .events('click')
    .mapTo({});

  const state$ = xs.merge(formSubmit$, notformClick$).fold(p => !p, true);

  const vdom$ = state$.map((showForm) =>
    showForm
      ? form([button("Form button")])
      : button('.notform', {props: { type: 'button' }}, "Not form button", )
  );

  return {
    DOM: vdom$
  };
}

run(main, {
  DOM: makeDOMDriver('#app')
});

Expected behavior:
Click the button should just switch the DOM between <form><button/></form> and <button>.

Actual behavior:
On the third click, the submit event is not intercepted, instead it goes to <form> and the entire page reloads.

Inspecting the code, I see fromEvent.js row 22 element.addEventListener is done on the <form> element because submit is classified as non-bubbling. But the event listener is not added back after the form element is gone and then redrawn.

Versions of packages used:
@cycle/dom: 22.0.0
@cycle/run: 5.1.0
xstream: 11.7.0

[jvanbruegge]

This might be related to #839
I have to investigate this, thanks for the repro

[IssueHuntBot]

@issuehuntfest has funded $60.00 to this issue. See it on IssueHunt

[shesek]

I've been running into this issue as well and its been driving me crazy. Are there any workarounds?

[jvanbruegge]

It is possible that #906 fixes this as well, I will cut a release today or tomorrow so you can try it out

[shesek]

@jvanbruegge I tested against master, this indeed solves it! Thank you 🙏

[jvanbruegge]

good to know, thank you!