Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – React Select is not keeping dropdown open in test but it is in browser

I have this:

<AsyncReactSelect
    defaultOptions
    loadOptions={async () => [
      { value: "Pear", label: "Pear" },
      { value: "Banana", label: "Banana" },
      { value: "Raspberry", label: "Raspberry" },
    ]}
    closeMenuOnSelect={false}
    isMulti
  />

enter image description here

that works as I expect. i.e. Pear was selected and the dropdown remained opened

in my test I have

await act(async () => {
  // open the dropdown
  const selectDropdown = screen.getAllByRole("combobox")[0]
  await userEvent.click(selectDropdown)

  await screen.findByText("Pear")
  screen.debug() // first debug
  await userEvent.type(selectDropdown, "{enter}")

  screen.debug() // second debug
})

in the first debug, I clear see all the dropdown options in a list

but in the second one, I can never see them and I have no clue as to why. I have tried fireEvent.click too as I wasn’t sure if something odd was happening in the click functions.

any idea how to solve this?

EDIT:

I added in this and notice it’s being called, it only gets called in the browser when I click outside the menu

 onMenuClose={() => {
          console.log("called the close!!")
        }}
Tags:

2

Answers


  1. 0

    It’s maybe because of this part that this is happening.

    Try this:

    await act(async () => {
  // open the dropdown
  const selectDropdown = screen.getAllByRole("combobox")[0]
  await userEvent.click(selectDropdown)

  await screen.findByText("Pear")
  screen.debug() // first debug
  // await userEvent.type(selectDropdown, "{enter}")
  userEvent.keyboard("{enter}");

  screen.debug() // second debug
})

    Further reading here

    Login or Signup to reply.
  2. 0

    try this one from

    import ReactSelect, { components } from "react-select";


  <ReactSelect
          value={null}
          options={invitablePersons}
          placeholder="Who is invited?"
          menuPortalTarget={document.body}
          isOptionSelected={(option) => selectedInvitees.some((item) => item.id === option.id)}
          onChange={(e) => {
            handleSelection(e);
          }}
        />

    and the options array object structure must need like that

    {
        id:333
        label: "Test",
        value: 2
      }

    hope this will work on your side

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search