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 label = screen.getByText("Cities");
expect(Array.from(label.classList)).toContain("offscreen");
});
+
+ it("is possible to select again the last deleted item", async () => {
+ render(
+
+
+ ,
+ );
+
+ 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 () => {