fix: prevent single-select lists from reopening when you select an it…

…em from the search bar

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.

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}