From 65d68c7bcbef27aae3539b78362f0e63472d025d Mon Sep 17 00:00:00 2001
From: Denis LE <ledenis.git@gmail.com>
Date: Sat, 3 Dec 2022 14:26:32 +0100
Subject: [PATCH 1/2] add failing test for selecting same option for multiple
 dropdowns

---
 src/__tests__/select-event.test.tsx | 36 +++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/src/__tests__/select-event.test.tsx b/src/__tests__/select-event.test.tsx
index bf9d78c..60dc286 100644
--- a/src/__tests__/select-event.test.tsx
+++ b/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

From 9b52932b31812ed52df6f1039183b6d592121f02 Mon Sep 17 00:00:00 2001
From: Denis LE <ledenis.git@gmail.com>
Date: Sat, 3 Dec 2022 23:45:37 +0100
Subject: [PATCH 2/2] recursively find container by className

---
 src/index.ts | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/src/index.ts b/src/index.ts
index 5a91cca..cf07c08 100644
--- a/src/index.ts
+++ b/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;
 }