cyclejsxstream-js

Cycle.js/xstream click event streamed once, but fired twice


There's a single button element on the page and the following click stream:

let submitClick$ = sources.DOM.select(buttonSel)
  .events("click")
  .mapTo(true)
  .debug(console.log)

Once I click on the button, true is logged, which is correct.

However, when I map the stream, the code inside runs twice:

let submitDeal$ = submitClick$.map(() => {
  console.log("Clicked")
  // ...
})

No other event handlers should be attached to the button, and the element itself sits inside a div:

button(".btn--add", "Submit")

The usual event.preventDefault() and event.stopPropagation() doesn't make a difference, and inspecting the event does show that it is fired from the same element button.btn--add.

Not really sure what's going on, any ideas are appreciated! Thanks!

Versions:

"@cycle/dom": "^12.2.5"
"@cycle/http": "^11.0.1"
"@cycle/xstream-run": "^3.1.0"
"xstream": "^6.4.0"

Update 1: I triple checked and no JS files are loaded twice. I'm using Webpack that bundles a single app.js file that's loaded on the page (Elixir/Phoenix app). Also when inspecting the button in the Event Listeners tab in Chrome's Developer Tools, it seems that only 1 event handled is attached.

Update 2: Gist with the code


Solution

  • Turns out this was due to a bug in xstream, which was fixed in xstream@7.0.0.