diff --git a/.changeset/sweet-rats-poke.md b/.changeset/sweet-rats-poke.md new file mode 100644 index 0000000..162dd86 --- /dev/null +++ b/.changeset/sweet-rats-poke.md @@ -0,0 +1,5 @@ +--- +"@openfun/cunningham-react": patch +--- + +fix failing selection of last removed item diff --git a/packages/react/src/components/Forms/Select/multi-searchable.tsx b/packages/react/src/components/Forms/Select/multi-searchable.tsx index e79a821..9b2a0e6 100644 --- a/packages/react/src/components/Forms/Select/multi-searchable.tsx +++ b/packages/react/src/components/Forms/Select/multi-searchable.tsx @@ -37,7 +37,7 @@ export const SelectMultiSearchable = (props: SubProps) => { items: options, itemToString: optionToString, defaultHighlightedIndex: 0, // after selection, highlight the first item. - selectedItem: null, + selectedItem: null, // Important, without this we are not able to re-select the last removed option. stateReducer: (state, actionAndChanges) => { const { changes, type } = actionAndChanges; switch (type) { diff --git a/packages/react/src/components/Forms/Select/multi-simple.tsx b/packages/react/src/components/Forms/Select/multi-simple.tsx index 9712da0..d1d341c 100644 --- a/packages/react/src/components/Forms/Select/multi-simple.tsx +++ b/packages/react/src/components/Forms/Select/multi-simple.tsx @@ -32,6 +32,7 @@ export const SelectMultiSimple = (props: SubProps) => { const downshiftReturn = useSelect({ items: options, itemToString: optionToString, + selectedItem: null, // Important, without this we are not able to re-select the last removed option. defaultHighlightedIndex: 0, // after selection, highlight the first item. stateReducer: (state, actionAndChanges) => { const { changes, type } = actionAndChanges; diff --git a/packages/react/src/components/Forms/Select/multi.spec.tsx b/packages/react/src/components/Forms/Select/multi.spec.tsx index 92e2013..9c241ed 100644 --- a/packages/react/src/components/Forms/Select/multi.spec.tsx +++ b/packages/react/src/components/Forms/Select/multi.spec.tsx @@ -724,6 +724,67 @@ describe(" + , + ); + + const input = screen.getByRole("combobox", { + name: "Cities", + }); + expectSelectedOptions([]); + + const user = userEvent.setup(); + await user.click(input); + + // Select options. + await user.click( + screen.getByRole("option", { + name: "Paris", + }), + ); + expectSelectedOptions(["Paris"]); + + // Clear selection. + const clearButton = screen.getByRole("button", { + name: "Clear all selections", + }); + await user.click(clearButton); + expectSelectedOptions([]); + + // Select again London. + await user.click(input); + await user.click( + screen.getByRole("option", { + name: "Paris", + }), + ); + expectSelectedOptions(["Paris"]); + }); }); describe("Searchable", async () => {