From 7ddcfeb4bc565d5a7eb6c49fb6da3671063d9f79 Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Tue, 28 Nov 2023 16:28:00 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(react)=20fix=20closing=20of=20menu?=
 =?UTF-8?q?=20via=20toggle=20button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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()
---
 .changeset/long-jeans-rush.md                               | 5 +++++
 .../react/src/components/Forms/Select/mono-searchable.tsx   | 6 +++++-
 packages/react/src/components/Forms/Select/mono.spec.tsx    | 4 ++--
 .../react/src/components/Forms/Select/multi-searchable.tsx  | 6 +++++-
 packages/react/src/components/Forms/Select/multi.spec.tsx   | 6 +++---
 5 files changed, 20 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/long-jeans-rush.md

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<SelectHandle, SubProps>(
           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("<Select/>", () => {
       expectMenuToBeOpen(menu);
       expectOptions(["Paris", "Panama"]);
 
-      await user.type(input, "r");
+      await user.type(input, "r", { skipClick: true });
       expectOptions(["Paris"]);
 
       // Select option.
@@ -211,7 +211,7 @@ describe("<Select/>", () => {
       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<SelectHandle, SubProps>(
           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("<Select multi={true} />", () => {
       await user.type(input, "Par");
       expectOptions(["Paris"]);
 
-      await user.type(input, "{enter}");
+      await user.type(input, "{enter}", { skipClick: true });
 
       await waitFor(() => expectSelectedOptions(["Paris"]));
     });
@@ -1504,9 +1504,9 @@ describe("<Select multi={true} />", () => {
       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"]|');