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("", () => {
expect(valueRendered).toHaveTextContent("");
});
+ it("still shows the selected current choice even if the options are different objects", async () => {
+ const Wrapper = () => {
+ const [value, setValue] = useState();
+ const [count, setCount] = useState(0);
+ return (
+
+
+
Value = {value}|
+
+
+
+ );
+ };
+
+ render(, {
+ 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 = [
{