Semantic-ui-react: Checkbox: onClick doesn't fire when inside a Dropdown

[mihai-dinculescu]

Steps

Add a checkbox inside a dropdown, either as header or item.

Expected Result

• onClick fires

Actual Result

• onClick doesn't fire
• also note the weird font

Version

0.74.1

Testcase

https://codepen.io/anon/pen/zENBPx

[levithomason]

Looks like the Dropdown is overriding onClick when looping over the options and creating DropdownItems. Seen here.

Workaround

Use onMouseDown instead. Working fork https://codepen.io/levithomason/pen/qPRqRg.

Fix

The DropdownItem.create() factory call needs to no override the onClick handler, but wrap it. An example of this is shown in the same file, Dropdown.js, where handleIconOverrides() is used to wrap the icon handlers and not override them.

[levithomason]

Note, children are not supported in a Dropdown. Use the options prop instead. The children API will be removed.

[mihai-dinculescu]

I'll have a go at getting it fixed.

[mihai-dinculescu]

@levithomason I don't think that DropdownItem is the issue. The Checkbox is displayed inside a DropdownHeader after all, not inside an Item. handleItemClick is not called.

Adding multiple={true} fixes the problem, but it's something I'd prefer not to do.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.

[ghost]

don't close this issue bot

[tarang9211]

@levithomason or anyone here, what's the update on this issue? any ideas on how to fix?

[nwpray]

I noticed that when you click on other Items or Headers, the order of called Dropdown methods are:

But when you click on the checkbox its order is:

So it appears that the blur event is being called before the mouseDown event which causes the close method of Dropdown to be called without the isMouseDown property being set in the handleMouseDown method. I tried with vanilla html and the order is mouseDown->blur so I am a bit confused. I will keep looking into this.

[walter76]

Hi,

I gave this issue a shot and implemented what was suggested by @levithomason in a previous comment. But this did not work as the onClick handler will never be called. I checked this by adding a debug() output into onClick.

As it was also suggested to not use children, but instead use the options property, I changed the example to do so. But this also did not change anything. The onClick handler on the DropdownItem is simply not called. My guess is, that handleMouseDown() captures the event so it is not being further propagated.

I could hook into handleMouseDown() and propagate onClick, but this kind of feels like a hack. Are there any other ideas?

[ghost]

I tried to replicate the workaround @levithomason shared and it worked for me.

Sandbox

[Shenrak]

I would like to trigger a simple onClick :

public onClick = () => this.setState({loading: true})

That would display the loading prop of the dropdown object onOpen, but it doesn't seem to work.
onOpen, onMouseDown, onFocus don't work either...

Edit : onOpen is perfectly working, i was too dumb to check my shouldComponentUpdate. Sorry.

[levithomason]

Note, I've given a workaround and a proper fix here https://github.com/Semantic-Org/Semantic-UI-React/issues/2121#issuecomment-331966524. I've also included a reference to the proper pattern in another component that can be copied. Any PR implementing this would be much appreciated!