CODEWITHSUNDEEP
javascriptreactjssemantic-uisemantic-ui-react
Martin Massera
Martin Massera

Reputation: 1906

Semantic UI React - do not trigger onChange while dropdown option list is still open

I have a dropdown in semantic on ReactJS and I want to trigger the onChange event only when a user really selects an option, and not when the list of options is still displayed.

Let me explain:

The dropdown is created like this:

<Dropdown
  placeholder='Select language'
  fluid
  search
  selection
  options={options}
  onChange={...}
/>

Which displays like this:

enter image description here

When you click on it, it opens (drops down?) the list of options:

enter image description here

The problem is that, when you use the down arrows to go to the desired option, it triggers onChange every time you press the down arrow. In this case, to reach Aragones, it triggers the onChange 4 times.

enter image description here

I want to trigger the onChange only when the list of options gets closed, and not the 3 previous times, where the user didn't mean to select any value:

enter image description here

Intuitively for me, the user only wants to select the value when he pressed enter, or clicked in the option, or clicked outside the options to close the option list. Otherwise she is just browsing around. But I wouldn't want to write individual listeners for all these cases.

In my case, selecting an option has a lot of consequences, so I want to know when the user really wants to do this. How can I do this?

As an alternative, can I listen to show or hide events for the option list? or ask in the onChange if the option list is shown or hidden?

Thanks!

Upvotes: 1

Views: 1969

Answers (1)

Gennady Dogaev
Gennady Dogaev

Reputation: 5991

From https://react.semantic-ui.com/modules/dropdown/,

selectOnNavigation true {bool}
Whether or not to change the value when navigating the menu using arrow keys. Setting to false will require enter or left click to confirm a choice.

Upvotes: 2

Related Questions