Cannot use more than 1 react-selects. Only first one can be tested.

[madecki]

I'm fighting with that issue very long already. I'm using React 17 with RTL and we have our own wrapper on react-select (visual aspects). I'm using react-select-event to select specific option. This works but only when there's only 1 select on page. I mean, I can have 5 of them but only first one can be changed to have different value. Other selects are found but I get error from RTL that element with provided text (my option I want to set) is not in the DOM.

It seems like function that opens dropdown menu cannot be triggered on any other element than first react-select found in the DOM?

Anyone had similar problem?

<Dropdown
  name={`store-${i}.solutionChosen`}
  label={t('cashServices.form.solutionChosen')}
  control={control}
  errors={errors}
  rules={{ required: t('common.form.validationMessages.required') }}
  options={availableSolutions}
  defaultValue={
    availableSolutions.find(solution => solution.value === locations[i].cashData?.es.solutionChosen) || availableSolutions[0]
  }
/>
<Dropdown
   name={`store-${i}.pickupsPerMonth`}
   label={t('cashServices.form.pickupsPerMonth')}
   control={control}
   errors={errors}
   rules={{ required: t('common.form.validationMessages.required') }}
   options={pickupsPerMonthOptions}
   defaultValue={
    pickupsPerMonthOptions.find(
    pickupOption => pickupOption.value === locations[i].cashData?.es.pickupsPerMonth
    ) || pickupsPerMonthOptions[0]
   }
/>

await act(async () => {
  await selectEvent.select(
   screen.getAllByLabelText('cashServices.form.solutionChosen')[0],
   availableSolutions[1].label
  );
});

await act(async () => {
  await selectEvent.select(
   screen.getAllByLabelText('cashServices.form.pickupsPerMonth')[0],
   pickupsPerMonth[1].label
  );
})

[pipboy3000]

I have a similar problem.

There are two selections, and the second one depends on the choice of the first one.

In testing, the first select works with react-select-event, but there seems to be no Option for the second select.

[saintpepsicola]

I have a similar problem.

There are two selections, and the second one depends on the choice of the first one.

In testing, the first select works with react-select-event, but there seems to be no Option for the second select.

same

[jb8429]

I've got exactly the same problem. Would love to know if anyone has a workaround