From a32bac75dbbe5c620f5bd001eabe94d327584277 Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Mon, 5 Feb 2024 11:43:10 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(react)=20fix=20missing=20selected?=
 =?UTF-8?q?=20option=20of=20Select?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

In some cases, when the options were newly built object, due to the
fact that we were using object equality to check for the current selected
item, it was not working in those cases.
---
 .changeset/sweet-apes-sip.md                  |  5 ++
 .../components/Forms/Select/mono-common.tsx   |  3 +-
 .../src/components/Forms/Select/mono.spec.tsx | 64 +++++++++++++++++++
 3 files changed, 71 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/sweet-apes-sip.md

diff --git a/.changeset/sweet-apes-sip.md b/.changeset/sweet-apes-sip.md
new file mode 100644
index 0000000..606e56d
--- /dev/null
+++ b/.changeset/sweet-apes-sip.md
@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": patch
+---
+
+fix missing selected option of Select
diff --git a/packages/react/src/components/Forms/Select/mono-common.tsx b/packages/react/src/components/Forms/Select/mono-common.tsx
index 5ce5d31..94bdbed 100644
--- a/packages/react/src/components/Forms/Select/mono-common.tsx
+++ b/packages/react/src/components/Forms/Select/mono-common.tsx
@@ -186,7 +186,8 @@ export const SelectMonoAux = ({
                       className={classNames("c__select__menu__item", {
                         "c__select__menu__item--highlight": isActive,
                         "c__select__menu__item--selected":
-                          downshiftReturn.selectedItem === item,
+                          downshiftReturn.selectedItem &&
+                          optionsEqual(downshiftReturn.selectedItem, item),
                         "c__select__menu__item--disabled": item.disabled,
                       })}
                       key={`${optionToValue(item)}${index.toString()}`}
diff --git a/packages/react/src/components/Forms/Select/mono.spec.tsx b/packages/react/src/components/Forms/Select/mono.spec.tsx
index a7b37a8..57a52b1 100644
--- a/packages/react/src/components/Forms/Select/mono.spec.tsx
+++ b/packages/react/src/components/Forms/Select/mono.spec.tsx
@@ -1641,6 +1641,70 @@ describe("<Select/>", () => {
       expect(valueRendered).toHaveTextContent("");
     });
 
+    it("still shows the selected current choice even if the options are different objects", async () => {
+      const Wrapper = () => {
+        const [value, setValue] = useState<string | number | undefined>();
+        const [count, setCount] = useState(0);
+        return (
+          <CunninghamProvider>
+            <div>
+              <div>Value = {value}|</div>
+              <Button onClick={() => setCount(count + 1)}>Rerender</Button>
+              <Select
+                label="City"
+                options={[
+                  {
+                    label: "Paris",
+                    value: "paris",
+                  },
+                  {
+                    label: "Panama",
+                    value: "panama",
+                  },
+                  {
+                    label: "London",
+                    value: "london",
+                  },
+                ]}
+                value={value}
+                onChange={(e) => {
+                  setValue(e.target.value as string);
+                }}
+              />
+            </div>
+          </CunninghamProvider>
+        );
+      };
+
+      render(<Wrapper />, {
+        wrapper: CunninghamProvider,
+      });
+
+      const user = userEvent.setup();
+      const input = screen.getByRole("combobox", {
+        name: "City",
+      });
+
+      // Select an option
+      await user.click(input);
+      await user.click(
+        screen.getByRole("option", {
+          name: "Panama",
+        }),
+      );
+
+      // Verify that the value is selected.
+      await user.click(input);
+      expectOptionToBeSelected(screen.getByRole("option", { name: "Panama" }));
+
+      // Rerender the select with the options mutated.
+      await user.click(screen.getByRole("button", { name: "Rerender" }));
+
+      // Verify that the value is still selected.
+      await user.click(input);
+      expectOptionToBeSelected(screen.getByRole("option", { name: "Panama" }));
+    });
+
     it("updates the value if the value is removed from the options (controlled)", async () => {
       let myOptions = [
         {