1

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!

Improve this question

1 Answer 1

Reset to default
2

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

thanks! I wonder who thought that this should be the default option
@MartinMassera According to w3c recommendations for accessible websites, "When a choice is highlighted using the arrow keys, the highlighted choice is displayed in the text box.". I found out about this from react-autosuggest docs. That component does the same - fires onChange when user navigates with arrows
since you seem to know your way around this, do you know how to do so that if the user doesnt actually select anything, also the onChange doesnt get triggered? if the user navigates down and hits 'esc', it still counts as onChange. This happens when the original value is not set.
Sorry, that's not actually true. If you hit esc, nothing happens. But if the user clicks outside the dropdown, it counts as selected.
@MartinMassera "selectOnBlur true {bool} Define whether the highlighted item should be selected on blur." I think that's it

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.