fix: positioning also for cmd+k

Author: OliwiaGowor

src/command-pallette/CommandPalletteUI/CommandPaletteSearchBar.tsx

@@ -10,33 +10,10 @@ import './CommandPaletteSearchBar.scss';
 export function CommandPaletteSearchBar({ slot }: { slot?: string }) {
   const { t } = useTranslation();
   const [open, setOpen] = useState(false);
-  const inputRef = useRef<InputDomRef | null>(null);
-  const commandPaletteRef = useRef<HTMLDivElement | null>(null);
   const [resourceCache, updateResourceCache] = useObjectState<
     Record<string, K8sResource[]>
   >();
 
-  useEffect(() => {
-    if (!open || !inputRef.current || !commandPaletteRef.current) return;
-
-    const shellbarRect = inputRef.current.getBoundingClientRect();
-    const paletteContent = commandPaletteRef.current.querySelector(
-      '.command-palette-ui__content',
-    ) as HTMLElement;
-
-    if (!paletteContent) return;
-
-    const paletteWrapper = commandPaletteRef.current.querySelector(
-      '.command-palette-ui__wrapper',
-    ) as HTMLElement;
-
-    if (paletteWrapper && window.screen.width > 1040) {
-      paletteWrapper.style.left = `${shellbarRect.left +
-        shellbarRect.width / 2 -
-        paletteContent.offsetWidth / 2}px`;
-    }
-  }, [open]);
-
   const setShowDialog = (value: boolean) => {
     const modalPresent = document.querySelector('ui5-dialog[open]');
     // disable opening palette if other modal is present
@@ -48,6 +25,7 @@ export function CommandPaletteSearchBar({ slot }: { slot?: string }) {
   return (
     <>
       <Input
+        id="command-palette-search-bar"
         accessibleName="command-palette-search-bar"
         onClick={() => setOpen(true)}
         onInput={e => e.preventDefault()}
@@ -56,18 +34,15 @@ export function CommandPaletteSearchBar({ slot }: { slot?: string }) {
         icon={<Icon name="slim-arrow-right" />}
         slot={slot}
         placeholder={t('command-palette.search.quick-navigation')}
-        ref={inputRef}
       />
       {open &&
         createPortal(
-          <div ref={commandPaletteRef}>
-            <CommandPaletteUI
-              showCommandPalette={open}
-              hide={() => setShowDialog(false)}
-              resourceCache={resourceCache}
-              updateResourceCache={updateResourceCache}
-            />
-          </div>,
+          <CommandPaletteUI
+            showCommandPalette={open}
+            hide={() => setShowDialog(false)}
+            resourceCache={resourceCache}
+            updateResourceCache={updateResourceCache}
+          />,
           document.body,
         )}
     </>

src/command-pallette/CommandPalletteUI/CommandPaletteUI.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useEffect, useState } from 'react';
+import { ReactNode, useEffect, useRef, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 import { useEventListener } from 'hooks/useEventListener';
 import { addHistoryEntry, getHistoryEntries } from './search-history';
@@ -62,6 +62,8 @@ export function CommandPaletteUI({
   const [isHistoryMode, setHistoryMode] = useState(false);
   const [historyIndex, setHistoryIndex] = useState(0);
 
+  const commandPaletteRef = useRef<HTMLDivElement | null>(null);
+
   const {
     results,
     suggestedQuery,
@@ -80,6 +82,21 @@ export function CommandPaletteUI({
     document.getElementById('command-palette-search')?.focus();
   }, []);
 
+  useEffect(() => {
+    const headerInput = document.getElementById('command-palette-search-bar');
+    const paletteCurrent = commandPaletteRef.current;
+
+    if (!showCommandPalette || !headerInput || !paletteCurrent) return;
+
+    const shellbarRect = headerInput.getBoundingClientRect();
+
+    if (paletteCurrent && window.screen.width > 1040) {
+      paletteCurrent.style.left = `${shellbarRect.left +
+        shellbarRect.width / 2 -
+        paletteCurrent.offsetWidth / 2}px`;
+    }
+  }, [showCommandPalette]);
+
   const commandPaletteInput = document.getElementById('command-palette-search');
 
   const handleQuerySelection = () => {
@@ -179,7 +196,11 @@ export function CommandPaletteUI({
 
   return (
     <Background hide={hide}>
-      <div className="command-palette-ui__wrapper" role="dialog">
+      <div
+        className="command-palette-ui__wrapper"
+        role="dialog"
+        ref={commandPaletteRef}
+      >
         <div className="command-palette-ui__content">
           <NamespaceContextDisplay
             namespaceContext={namespaceContext}