studio/cunningham
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🐛(react) fix closing of menu via toggle button

Browse Source 
Previously it was not possible to close the menu when clicking on
the toggle button on search select. It was caused by a conflicting
state update.
1. Downshift triggers closing the menu from getToggleButtonProps
2. wrapperProps was calling downshiftReturn.openMenu()
This commit is contained in:
Nathan Vasse
2023-11-28 16:28:00 +01:00
committed by NathanVss
parent b25aa8f078
commit 7ddcfeb4bc
5 changed files with 20 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/long-jeans-rush.md Normal file
View File

@@ -0,0 +1,5 @@
---
"@openfun/cunningham-react": patch
---
fix closing of menu via toggle button

6
packages/react/src/components/Forms/Select/mono-searchable.tsx
View File

@@ -120,7 +120,11 @@ export const SelectMonoSearchable = forwardRef<SelectHandle, SubProps>(
wrapperProps: { wrapperProps: {
onClick: () => { onClick: () => {
inputRef.current?.focus(); 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({ toggleButtonProps: downshiftReturn.getToggleButtonProps({

4
packages/react/src/components/Forms/Select/mono.spec.tsx
View File

@@ -136,7 +136,7 @@ describe("<Select/>", () => {
expectMenuToBeOpen(menu); expectMenuToBeOpen(menu);
expectOptions(["Paris", "Panama"]); expectOptions(["Paris", "Panama"]);
await user.type(input, "r"); await user.type(input, "r", { skipClick: true });
expectOptions(["Paris"]); expectOptions(["Paris"]);
// Select option. // Select option.
@@ -211,7 +211,7 @@ describe("<Select/>", () => {
expectMenuToBeOpen(menu); expectMenuToBeOpen(menu);
expectOptions(["Paris", "Panama"]); expectOptions(["Paris", "Panama"]);
await user.type(input, "rr"); await user.type(input, "rr", { skipClick: true });
expectNoOptions(); expectNoOptions();
expect(input).toHaveValue("Parr"); expect(input).toHaveValue("Parr");

6
packages/react/src/components/Forms/Select/multi-searchable.tsx
View File

@@ -136,7 +136,11 @@ export const SelectMultiSearchable = forwardRef<SelectHandle, SubProps>(
wrapperProps: { wrapperProps: {
onClick: () => { onClick: () => {
inputRef.current?.focus(); 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(), toggleButtonProps: downshiftReturn.getToggleButtonProps(),

6
packages/react/src/components/Forms/Select/multi.spec.tsx
View File

@@ -1247,7 +1247,7 @@ describe("<Select multi={true} />", () => {
await user.type(input, "Par"); await user.type(input, "Par");
expectOptions(["Paris"]); expectOptions(["Paris"]);
await user.type(input, "{enter}"); await user.type(input, "{enter}", { skipClick: true });
await waitFor(() => expectSelectedOptions(["Paris"])); await waitFor(() => expectSelectedOptions(["Paris"]));
}); });
@@ -1504,9 +1504,9 @@ describe("<Select multi={true} />", () => {
const user = userEvent.setup(); const user = userEvent.setup();
await user.click(input); await user.click(input);
await waitFor(() => expectOptions(["Paris", "New York", "Tokyo"])); 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 waitFor(() => expectOptions(["New York"]));
await user.type(input, "{enter}}"); await user.type(input, "{enter}}", { skipClick: true });
expectSelectedOptions(["London", "New York"]); expectSelectedOptions(["London", "New York"]);
screen.getByText('Value = ["london","new_york"]|'); screen.getByText('Value = ["london","new_york"]|');