From e222a5384ec148a62869dba5d7859cbb74767861 Mon Sep 17 00:00:00 2001
From: Franz Heidl <f.heidl@sap.com>
Date: Thu, 25 Jun 2026 15:24:11 +0200
Subject: [PATCH] fix(ui): fix keyboard navigation in Select so first arrow key
 press focuses first menu item

Only mount portal when menu is open so headless sorts items in the actual rendered dom

Signed-off-by: Franz Heidl <f.heidl@sap.com>
---
 .../components/Select/Select.component.tsx    | 47 ++++++++++---------
 .../SelectOption/SelectOption.component.tsx   | 35 +++++++-------
 2 files changed, 43 insertions(+), 39 deletions(-)

diff --git a/packages/ui-components/src/components/Select/Select.component.tsx b/packages/ui-components/src/components/Select/Select.component.tsx
index ac023e217e..8dc8afbdcd 100644
--- a/packages/ui-components/src/components/Select/Select.component.tsx
+++ b/packages/ui-components/src/components/Select/Select.component.tsx
@@ -418,33 +418,34 @@ export const Select = ({
                       )
                     }}
                   </ListboxButton>
-                  {createPortal(
-                    <div
-                      ref={refs.setFloating}
-                      className={`
+                  {open &&
+                    createPortal(
+                      <div
+                        ref={refs.setFloating}
+                        className={`
                           juno-select-menu-container
                           ${menuStylesContainer}
                         `}
-                      style={{
-                        position: strategy,
-                        top: y ?? 0,
-                        left: x ?? 0,
-                        display: open ? "block" : "none",
-                      }}
-                      {...getFloatingProps()}
-                    >
-                      <ListboxOptions
-                        static
-                        className={`
-                          juno-select-menu
-                          ${menuStyles}
-                        `}
+                        style={{
+                          position: strategy,
+                          top: y ?? 0,
+                          left: x ?? 0,
+                        }}
+                        {...getFloatingProps()}
+                        tabIndex={-1}
                       >
-                        {children}
-                      </ListboxOptions>
-                    </div>,
-                    portalContainerRef ?? document.body
-                  )}
+                        <ListboxOptions
+                          static
+                          className={`
+                            juno-select-menu
+                            ${menuStyles}
+                          `}
+                        >
+                          {children}
+                        </ListboxOptions>
+                      </div>,
+                      portalContainerRef ?? document.body
+                    )}
                 </div>
               </>
             )
diff --git a/packages/ui-components/src/components/SelectOption/SelectOption.component.tsx b/packages/ui-components/src/components/SelectOption/SelectOption.component.tsx
index 533061b069..c2a82e7267 100644
--- a/packages/ui-components/src/components/SelectOption/SelectOption.component.tsx
+++ b/packages/ui-components/src/components/SelectOption/SelectOption.component.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { Fragment, HTMLAttributes, ReactNode, useContext, useEffect } from "react"
+import React, { HTMLAttributes, ReactNode, useContext, useEffect } from "react"
 import { ListboxOption } from "@headlessui/react"
 import { SelectContext } from "../Select/Select.component"
 import { Icon } from "../Icon"
@@ -90,20 +90,23 @@ export const SelectOption = ({
   }, [value, label, children])
 
   return (
-    <ListboxOption as={Fragment} disabled={disabled} value={value || children}>
-      {({ selected }) => (
-        <li
-          className={`
-          juno-select-option 
-          jn:min-h-10
-          ${optionStyles}
-          ${selected ? "juno-select-option-selected " + selectedOptionStyles : unselectedOptionStyles}
-          ${disabled ? "juno-select-option-disabled jn:opacity-50 jn:cursor-not-allowed" : ""}
-          ${truncateOptions ? "juno-select-option-truncate" : ""}
-          ${className}
-        `}
-          {...props}
-        >
+    <ListboxOption
+      as="li"
+      disabled={disabled}
+      value={value || children}
+      className={({ selected }: { selected: boolean }) => `
+        juno-select-option
+        jn:min-h-10
+        ${optionStyles}
+        ${selected ? "juno-select-option-selected " + selectedOptionStyles : unselectedOptionStyles}
+        ${disabled ? "juno-select-option-disabled jn:opacity-50 jn:cursor-not-allowed" : ""}
+        ${truncateOptions ? "juno-select-option-truncate" : ""}
+        ${className}
+      `}
+      {...props}
+    >
+      {({ selected }: { selected: boolean }) => (
+        <>
           {selected ? <Icon icon="check" size="18" className={selectedIconStyles} /> : ""}
           <span
             className={`
@@ -113,7 +116,7 @@ export const SelectOption = ({
           >
             {children || label || value}
           </span>
-        </li>
+        </>
       )}
     </ListboxOption>
   )