Semantic-ui-react: Checkbox: double call of `onClick` when event fired by mouse

Created on 20 Dec 2018  路  11Comments  路  Source: Semantic-Org/Semantic-UI-React

e.g. use the example from the docs and change the Checkbox onChange to onClick:

import React, { Component } from 'react'
import { Button, Checkbox } from 'semantic-ui-react'

export default class CheckboxExampleRemoteControl extends Component {
  state = { checked: false }
  toggle = () => this.setState({ checked: !this.state.checked })

  render() {
    return (
      <div>
        <Button onClick={this.toggle}>Toggle it</Button>
        <Checkbox label='Check this box' onClick={this.toggle} checked={this.state.checked} />
      </div>
    )
  }
}
bug

Most helpful comment

We introduced some changes in #2748, and yes it comes from there. I used your code in sandbox, so we have reproduction:
https://codesandbox.io/s/l9n88k3y4q

The issue comes from a double called onClick handler when it's clicked with mouse. Should be fixed.

All 11 comments

We introduced some changes in #2748, and yes it comes from there. I used your code in sandbox, so we have reproduction:
https://codesandbox.io/s/l9n88k3y4q

The issue comes from a double called onClick handler when it's clicked with mouse. Should be fixed.

@layershifter I'd be happy to contribute to this one!

@Fabianopb you're welcome :+1:

I've been investigating this story, which is related to #2587 and I'm wondering about the order that the events are called. Currently we have

handleMouseDown() --> handleMouseUp() --> handleChange() --> handleClick()

Shouldn't handleClick() be called before handleChange()? Ping @levithomason

PR created! #3351

Heads up, I've got some local work on this that I'm implementing. I'll push later tonight or tomorrow and give an update on where it is.

@levithomason would this impact any work carried out in #3351? The PR is ready to merge IMO, what do you think @layershifter?

has this been released? I'm on 0.84 and am witnessing double onClicks

Will be released in 0.85.0.

when will that be released?

Releasing today.

Was this page helpful?
0 / 5 - 0 ratings