From 3dae9aacc47173025981a7168c04d60cde58608e Mon Sep 17 00:00:00 2001
From: Mohammer5 <jan-gerke@dhis2.org>
Date: Sun, 10 Nov 2024 13:49:23 +0800
Subject: [PATCH] fix(select a11y): give loading indicator space when no
 options

---
 .../select/src/single-select-a11y/menu/menu.js    | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/components/select/src/single-select-a11y/menu/menu.js b/components/select/src/single-select-a11y/menu/menu.js
index d07b4953e..9d2506b28 100644
--- 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;