diff --git a/.changeset/long-jeans-rush.md b/.changeset/long-jeans-rush.md new file mode 100644 index 0000000..08e7b38 --- /dev/null +++ b/.changeset/long-jeans-rush.md @@ -0,0 +1,5 @@ +--- +"@openfun/cunningham-react": patch +--- + +fix closing of menu via toggle button diff --git a/packages/react/src/components/Forms/Select/mono-searchable.tsx b/packages/react/src/components/Forms/Select/mono-searchable.tsx index ff894ae..06a4f5c 100644 --- a/packages/react/src/components/Forms/Select/mono-searchable.tsx +++ b/packages/react/src/components/Forms/Select/mono-searchable.tsx @@ -120,7 +120,11 @@ export const SelectMonoSearchable = forwardRef( wrapperProps: { onClick: () => { inputRef.current?.focus(); - downshiftReturn.openMenu(); + // This is important because if we don't check that: when clicking on the toggle button + // when the menu is open, it will close and reopen immediately. + if (!downshiftReturn.isOpen) { + downshiftReturn.openMenu(); + } }, }, toggleButtonProps: downshiftReturn.getToggleButtonProps({ diff --git a/packages/react/src/components/Forms/Select/mono.spec.tsx b/packages/react/src/components/Forms/Select/mono.spec.tsx index 0526b5e..a7b37a8 100644 --- a/packages/react/src/components/Forms/Select/mono.spec.tsx +++ b/packages/react/src/components/Forms/Select/mono.spec.tsx @@ -136,7 +136,7 @@ describe("", () => { expectMenuToBeOpen(menu); expectOptions(["Paris", "Panama"]); - await user.type(input, "rr"); + await user.type(input, "rr", { skipClick: true }); expectNoOptions(); expect(input).toHaveValue("Parr"); diff --git a/packages/react/src/components/Forms/Select/multi-searchable.tsx b/packages/react/src/components/Forms/Select/multi-searchable.tsx index 6de5bcc..98b3af0 100644 --- a/packages/react/src/components/Forms/Select/multi-searchable.tsx +++ b/packages/react/src/components/Forms/Select/multi-searchable.tsx @@ -136,7 +136,11 @@ export const SelectMultiSearchable = forwardRef( wrapperProps: { onClick: () => { inputRef.current?.focus(); - downshiftReturn.openMenu(); + // This is important because if we don't check that: when clicking on the toggle button + // when the menu is open, it will close and reopen immediately. + if (!downshiftReturn.isOpen) { + downshiftReturn.openMenu(); + } }, }, toggleButtonProps: downshiftReturn.getToggleButtonProps(), diff --git a/packages/react/src/components/Forms/Select/multi.spec.tsx b/packages/react/src/components/Forms/Select/multi.spec.tsx index 1b06d96..7345cce 100644 --- a/packages/react/src/components/Forms/Select/multi.spec.tsx +++ b/packages/react/src/components/Forms/Select/multi.spec.tsx @@ -1247,7 +1247,7 @@ describe("", () => { const user = userEvent.setup(); await user.click(input); await waitFor(() => expectOptions(["Paris", "New York", "Tokyo"])); - await user.type(input, "New"); + await user.type(input, "New", { skipClick: true }); await waitFor(() => expectOptions(["New York"])); - await user.type(input, "{enter}}"); + await user.type(input, "{enter}}", { skipClick: true }); expectSelectedOptions(["London", "New York"]); screen.getByText('Value = ["london","new_york"]|');