fix(select a11y): give loading indicator space when no options

dhis2 · Nov 10, 2024 · 3dae9aa · 3dae9aa
1 parent 2283155
commit 3dae9aa
Showing 1 changed file with 11 additions and 4 deletions.
diff --git a/components/select/src/single-select-a11y/menu/menu.js b/components/select/src/single-select-a11y/menu/menu.js
@@ -98,7 +98,11 @@ export function Menu({
 
                     {hasNoFilterMatch && <NoMatch>{noMatchText}</NoMatch>}
 
-                    <div className="listbox-container">
+                    <div
+                        className={cx('listbox-container', {
+                            'no-options': !options.length,
+                        })}
+                    >
                         <div className="listbox-wrapper">
                             <MenuOptionsList
                                 ref={listBoxRef}
@@ -142,9 +146,6 @@ export function Menu({
                             box-sizing: content-box;
                         }
 
-                        .filter-container {
-                        }
-
                         .listbox-container {
                             position: relative;
                             flex-grow: 1;
@@ -153,6 +154,12 @@ export function Menu({
                             overflow: hidden;
                         }
 
+                        .no-options {
+                            // @TODO: What should this value be?
+                            // Ask Joe
+                            height: 50px;
+                        }
+
                         .listbox-wrapper {
                             overflow: auto;
                             flex-grow: 1;