Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React Select dropdown is being closed after userEvent #1201

Open
RichMatthews opened this issue Feb 29, 2024 · 2 comments
Open

React Select dropdown is being closed after userEvent #1201

RichMatthews opened this issue Feb 29, 2024 · 2 comments
Labels
bug Something isn't working needs assessment This needs to be looked at by a team member

Comments

@RichMatthews
Copy link

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 RichMatthews added bug Something isn't working needs assessment This needs to be looked at by a team member labels Feb 29, 2024
@Krishna8691
Copy link

Krishna8691 commented Mar 4, 2024

I have mentioned some details on why the problem occurs and how can get around this problem here - JedWatson/react-select#5867 (comment)

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

@RichMatthews
Copy link
Author

RichMatthews commented Mar 4, 2024

@kentcdodds any advice you would recommend here?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working needs assessment This needs to be looked at by a team member
Projects
None yet
Development

No branches or pull requests

2 participants