user-event icon indicating copy to clipboard operation
user-event copied to clipboard

React Select dropdown is being closed after userEvent

Open RichMatthews opened this issue 1 year ago • 2 comments

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

RichMatthews avatar Feb 29 '24 11:02 RichMatthews

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

Krishna8691 avatar Mar 04 '24 05:03 Krishna8691

@kentcdodds any advice you would recommend here?

RichMatthews avatar Mar 04 '24 09:03 RichMatthews

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.

ph-fritsche avatar Jan 21 '25 10:01 ph-fritsche