🐛(react) fix missing selected option of Select

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

@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": patch
+---
+
+fix missing selected option of Select

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()}`}

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 = [
         {