How do I get Combobox onSelect to work on React Bootstrap modal?

Question

I have a React Bootstrap Modal in which is a Reach UI Combobox. The issue is, I can select the items from the Combobox when they are on the page but not in the Modal on left mouse click (it works with using the down arrow and hitting enter to select). The onSelect doesn't get triggered when in the modal.

I have a code sandbox at https://codesandbox.io/s/staging-butterfly-42fo2?file=/src/App.js where the issue is reproduced.

What's the issue and how do I get the click to work?

Answer 1

I found that playing with your code and setting https://reach.tech/combobox#comboboxpopover-portalto false works for me.

Give it a try.

glhf

Answer 2

Set the 'portal-props' of the ComboboxPopover to be 'false' will work:

<ComboboxPopover portal={false}>...</ComboboxPopover>