diff --git a/packages/react/src/components/Forms/Select/mono-simple.tsx b/packages/react/src/components/Forms/Select/mono-simple.tsx index 870f63d..65cdbdc 100644 --- a/packages/react/src/components/Forms/Select/mono-simple.tsx +++ b/packages/react/src/components/Forms/Select/mono-simple.tsx @@ -30,7 +30,7 @@ export const SelectMonoSimple = (props: SubProps) => { } downshiftReturn.selectItem(optionToSelect ?? null); - }, [props.value, props.downshiftProps.initialSelectedItem]); + }, [props.value, props.options]); return ( ", () => { await user.click(input); screen.getByText("No options available"); }); + + it("updates the value if the value is removed from the options (uncontrolled)", async () => { + let myOptions = [ + { + label: "Paris", + value: "paris", + }, + { + label: "Panama", + value: "panama", + }, + { + label: "London", + value: "london", + }, + ]; + + const Wrapper = ({ options }: { options: Option[] }) => { + return { + setValue(e.target.value as string); + setOnChangeCounts(onChangeCounts + 1); + }} + /> + + + ); + }; + + const { rerender } = render(, { + wrapper: CunninghamProvider, + }); + + const user = userEvent.setup(); + const input = screen.getByRole("combobox", { + name: "City", + }); + const valueRendered = document.querySelector(".c__select__inner__value"); + const menu: HTMLDivElement = screen.getByRole("listbox", { + name: "City", + }); + + // Check init value (defaultValue / value / nothing) + expect(valueRendered).toHaveTextContent(""); + screen.getByText("Value = |"); + screen.getByText("onChangeCounts = 0|"); + + await user.click(input); + expectMenuToBeOpen(menu); + expectOptions(["Paris", "Panama", "London"]); + + // Select London. + await user.click(screen.getByRole("option", { name: "London" })); + screen.getByText("Value = london|"); + screen.getByText("onChangeCounts = 1|"); + expect(valueRendered).toHaveTextContent("London"); + + // Remove London from the options. + myOptions = myOptions.filter((option) => option.value !== "london"); + // Rerender the select with the options mutated + rerender(); + + await user.click(input); + expectMenuToBeOpen(menu); + expectOptions(["Paris", "Panama"]); + expect(valueRendered).toHaveTextContent(""); + screen.getByText("Value = |"); + screen.getByText("onChangeCounts = 2|"); + }); }); });