From 57f66f3b5505b38ec93b864677f41485974d12af Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Wed, 22 May 2024 13:53:35 +0200
Subject: [PATCH] fix: prevent single-select lists from reopening when you
 select an item from the search bar (#7111)

We have this very specific edge case in the new project form
dropdowns. It only occurs for the single-select lists and only if you
select an item via search.

When the search input is non-empty, you can use enter to select the
first item in the list.

For some reason, this also triggers a click on the underlying button
that opens the dropdown (I'm guessing this is to do with an underlying
focus).

To work around it, we create a variable that prevents you from opening
the dropdown if it is true. We set it to 'true' when you close it (for
single-selects), but also set single-millisecond timeout that sets it
to false thereafter.

This is much to short for the user to notice anything, but it prevents
the browser from noticing the click.
---
 .../Project/CreateProject/SelectionButton.tsx       | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/frontend/src/component/project/Project/CreateProject/SelectionButton.tsx b/frontend/src/component/project/Project/CreateProject/SelectionButton.tsx
index 9a3527174f..610725b7ca 100644
--- a/frontend/src/component/project/Project/CreateProject/SelectionButton.tsx
+++ b/frontend/src/component/project/Project/CreateProject/SelectionButton.tsx
@@ -95,6 +95,7 @@ const CombinedSelect: FC<CombinedSelectProps> = ({
     const ref = useRef<HTMLDivElement>(null);
     const [anchorEl, setAnchorEl] = useState<HTMLDivElement | null>();
     const [searchText, setSearchText] = useState('');
+    const [recentlyClosed, setRecentlyClosed] = useState(false);
 
     const open = () => {
         setSearchText('');
@@ -111,6 +112,11 @@ const CombinedSelect: FC<CombinedSelectProps> = ({
         onChange(selected);
         if (!multiselect) {
             handleClose();
+            setRecentlyClosed(true);
+            // this is a hack to prevent the button from being
+            // auto-clicked after you select an item by pressing enter
+            // in the search bar for single-select lists.
+            setTimeout(() => setRecentlyClosed(false), 1);
         }
     };
 
@@ -129,10 +135,9 @@ const CombinedSelect: FC<CombinedSelectProps> = ({
                     color='primary'
                     startIcon={button.icon}
                     onClick={() => {
-                        // todo: find out why this is clicked when you
-                        // press enter in the search bar (only in
-                        // single-select mode)
-                        open();
+                        if (!recentlyClosed) {
+                            open();
+                        }
                     }}
                 >
                     {button.label}