fix: hide drop-down when options is empty when clicked on select input

Author: samshara

src/App/PageError/index.tsx

@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 import { useRouteError } from 'react-router-dom';
 
 import useBooleanState from '#hooks/useBooleanState';
-import Button from '#components/Button';
+import Button, { useButtonFeatures } from '#components/Button';
 
 import styles from './styles.module.css';
 
@@ -24,6 +24,9 @@ function PageError() {
             toggle: toggleFullErrorVisibility,
         },
     ] = useBooleanState(false);
+    const {
+        className: containerClassName,
+    } = useButtonFeatures({});
 
     return (
         <div className={styles.pageError}>
@@ -62,8 +65,9 @@ function PageError() {
                     )}
                 </div>
                 <div className={styles.footer}>
+                    {/* NOTE: using the anchor element as it will refresh the page */}
                     <a
-                        className={styles.homeLink}
+                        className={containerClassName}
                         href="/"
                     >
                         {/* FIXME: use translations */}

src/App/PageError/styles.module.css

@@ -43,22 +43,6 @@
             display: flex;
             align-items: center;
             justify-content: flex-end;
-
-            .home-link {
-                display: inline-flex;
-                align-items: center;
-                transition: var(--go-ui-duration-transition-medium) background-color ease-in-out;
-                border-radius: var(--go-ui-border-radius-full);
-                background-color: var(--go-ui-color-primary-red);
-                padding: var(--go-ui-spacing-4xs) var(--go-ui-spacing-sm);
-                text-decoration: none;
-                color: var(--go-ui-color-white);
-
-                &:hover {
-                    background-color: var(--go-ui-color-red-hover);
-                    text-decoration: underline;
-                }
-            }
         }
     }
 }

src/components/SearchMultiSelectInput/index.tsx

@@ -299,10 +299,7 @@ function SearchMultiSelectInput<
             onClearButtonClick={handleClear}
             searchText={searchInputValue}
             onSearchTextChange={handleSearchValueChange}
-            dropdownShown={showDropdown && (
-                (isTruthyString(searchInputValue) && searchInputValue.length > 0)
-                || realOptions.length > 0
-            )}
+            dropdownShown={showDropdown}
             onDropdownShownChange={handleChangeDropdown}
             focused={focused}
             onFocusedChange={setFocused}

src/components/SearchSelectInput/index.tsx

@@ -310,10 +310,7 @@ function SearchSelectInput<
             onClearButtonClick={handleClear}
             searchText={searchInputValue}
             onSearchTextChange={handleSearchValueChange}
-            dropdownShown={showDropdown && (
-                (isTruthyString(searchInputValue) && searchInputValue.length > 0)
-                || realOptions.length > 0
-            )}
+            dropdownShown={showDropdown}
             onDropdownShownChange={handleChangeDropdown}
             focused={focused}
             onFocusedChange={setFocused}

src/components/SelectInputContainer/index.tsx

@@ -183,9 +183,11 @@ function SelectInputContainer<
             if (readOnly) {
                 return;
             }
-            handleShowDropdown();
+            if (options.length > 0) {
+                handleShowDropdown();
+            }
         },
-        [readOnly, handleShowDropdown],
+        [readOnly, handleShowDropdown, options],
     );
 
     const handlePopupBlur = useCallback(