Multiselect: Add-new item causes `onSelect` handler to fire twice
Anifacted opened this issue · 2 comments
In the Multiselect component, when having the option of adding a new item to the list (via the AddItem component), hitting ENTER to confirm the action causes the onSelect handler to be called twice.
Note: It does not happen when simply clicking the AddItem. In this case, the handler is fired once as expected.
Expectations
I expect that hitting ENTER with the AddItem highlighted invokes the onSelect handler once.
Reality
Hitting ENTER with the AddItem highlighted invokes the onSelect handler twice.
Steps to Reproduce
- Go to codesandbox: https://codesandbox.io/s/intelligent-booth-veebni?file=/src/Example.tsx
- Open the console
- Click the Multiselect component, enter a search and hit ENTER over the "Add new"-item
- Observe how the items are logged twice (i.e. the onSelect handler was invoked twice).
Fine Print
- Component: Multiselect
- Version: v8.48.0 (and forward)
- Browsers: all
Notes
I observed this bug to have been introduced in v8.48.0 of react-dropdowns, since v8.47.0 does not have the issue.
Here's a comparison between the two: v8.47.0...v8.48.0
I am led to suspect that this commit could be responsible given its description: 1664050
Hey @Anifacted thank you for the comprehensive report! This is a known issue we have been tracking and will hopefully get to it in the coming future. Thanks for being patient with us.
@Anifacted please use the new Combobox where this is fixed (along with numerous a11y issues). Please see the following references for details: