Cannot select same option for multiple dropdowns

src/__tests__/select-event.test.tsx

@@ -344,6 +344,42 @@ describe("The select event helpers", () => {
     expect(form).toHaveFormValues({ food: "vanilla" });
   });
 
+  it("selects same options on multiple dropdowns", async () => {
+    const { getByLabelText, getByRole } = render(
+      <form role="form">
+        <label htmlFor="food-for-monday">Food for monday</label>
+        <Select
+          options={OPTIONS}
+          name="foodForMonday"
+          inputId="food-for-monday"
+        />
+        <label htmlFor="food-for-tuesday">Food for tuesday</label>
+        <Select
+          options={OPTIONS}
+          name="foodForTuesday"
+          inputId="food-for-tuesday"
+        />
+      </form>
+    );
+    const form = getByRole("form");
+    const mondayInput = getByLabelText("Food for monday");
+    const tuesdayInput = getByLabelText("Food for tuesday");
+
+    expect(form).toHaveFormValues({ foodForMonday: "", foodForTuesday: "" });
+
+    await selectEvent.select(tuesdayInput, "Chocolate");
+    expect(form).toHaveFormValues({
+      foodForMonday: "",
+      foodForTuesday: "chocolate",
+    });
+
+    await selectEvent.select(mondayInput, "Chocolate");
+    expect(form).toHaveFormValues({
+      foodForMonday: "chocolate",
+      foodForTuesday: "chocolate",
+    });
+  });
+
   describe("when asynchronously generating the list of options", () => {
     // from https://github.com/JedWatson/react-select/blob/v3.0.0/docs/examples/CreatableAdvanced.js
     // mixed with Async Creatable Example from https://react-select.com/creatable

src/index.ts

@@ -10,8 +10,30 @@ import {
 
 import act from "./act-compat";
 
+function findReactSelectContainerByClassName(
+  element: HTMLElement
+): HTMLElement | null {
+  if (
+    Array.from(element.classList).some((className) =>
+      className.match(/^css-[a-z0-9]+-container$/)
+    )
+  ) {
+    return element;
+  }
+  if (!element.parentElement) {
+    return null;
+  }
+  return findReactSelectContainerByClassName(element.parentElement);
+}
+
 // find the react-select container from its input field 🤷
 function getReactSelectContainerFromInput(input: HTMLElement): HTMLElement {
+  const container = findReactSelectContainerByClassName(input);
+  if (container) {
+    return container;
+  }
+  // for older versions of react-select fall back to old parent crawler
+  // istanbul ignore if
   return input.parentNode!.parentNode!.parentNode!.parentNode!
     .parentNode as HTMLElement;
 }