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(" { + setValue(e.target.value as string); + }} + /> + + + ); + }; + + 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 = [ {