CODEWITHSUNDEEP
cyclejsxstream-js
Svilen
Svilen

Reputation: 2648

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

Upvotes: 0

Views: 205

Answers (2)

Svilen
Svilen

Reputation: 2648

Turns out this was due to a bug in xstream, which was fixed in [email protected].

Upvotes: 0

André Staltz
André Staltz

Reputation: 13994

Too little information is given to resolve this problem. However some things come to mind:

You shouldn't use .debug(console.log) but .debug(x => console.log(x)) instead. In fact .debug() is enough, it will use console.log internally.

Then, is the button inside a <form>? That may be affecting the events. In general this question needs more details.

Upvotes: 0

Related Questions