React Select dropdown is being closed after userEvent
Reproduction example
https://codesandbox.io/p/devbox/6fqmnl?file=%2Fpackage.json%3A25%2C18
Prerequisites
React Select. This is fine in the browser btw
<AsyncReactSelect
defaultOptions
loadOptions={async () => [
{ value: "Pear", label: "Pear" },
{ value: "Banana", label: "Banana" },
{ value: "Raspberry", label: "Raspberry" },
]}
closeMenuOnSelect={false}
isMulti
onMenuClose={() => {
console.log("called the close!!")
}}
/>
My test
await act(async () => {
// assert option not selected yet
expect(screen.queryByLabelText("Remove Dr Jimmy Carter")).toBe(null)
// open the dropdown
const selectDropdown = screen.getAllByRole("combobox")[0]
await userEvent.click(selectDropdown)
await screen.findByText("Pear")
// all of the below fail (I don't run at the same time, but individually they all seem to close the dropdown)
await userEvent.type(selectDropdown, "{enter}")
await userEvent.selectOptions(selectDropdown, ["Pear"])
await userEvent.keyboard("{enter}")
await screen.findByLabelText("Remove Pear")
screen.debug()
})
Expected behavior
I would expect the dropdown to not close
Actual behavior
The dropdown is closing after selecting an option, despite this not happening in the browser
User-event version
14.5.2
Environment
Testing Library framework:
JS framework:
Test environment:
DOM implementation:
Additional context
No response
I have mentioned some details on why the problem occurs and how can get around this problem here - https://github.com/JedWatson/react-select/issues/5867#issuecomment-1975123337
In testing environment this doesn't throw error (depends on the device though)
document.createEvent("TouchEvent");
but in browser it does
Not sure if there is a way to disable the TouchEvents in testing environment
@kentcdodds any advice you would recommend here?
Sadly we don't have the capacity to debug issues with third-party libraries. If you can break this down to a minimal reproduction, I'll gladly reopen.