chore(combobox): sync with main changes (#2576)

this PR is only to reflect changes made in an older version in PR #2575
digdir · Oct 10, 2024 · 89972c9 · 89972c9
1 parent 9d47456
commit 89972c9
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 6 deletions.
diff --git a/packages/react/src/components/form/Combobox/Combobox.tsx b/packages/react/src/components/form/Combobox/Combobox.tsx
@@ -1,7 +1,7 @@
 import { FloatingFocusManager, FloatingPortal } from '@floating-ui/react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import cl from 'clsx/lite';
-import { forwardRef, useEffect, useId, useRef, useState } from 'react';
+import { forwardRef, useEffect, useRef, useState } from 'react';
 import type { InputHTMLAttributes, ReactNode } from 'react';
 
 import type { PortalProps } from '../../../types/Portal';
@@ -156,8 +156,6 @@ export const ComboboxComponent = forwardRef<HTMLInputElement, ComboboxProps>(
     const portalRef = useRef<HTMLDivElement>(null);
     const listRef = useRef<Array<HTMLElement | null>>([]);
 
-    const listId = useId();
-
     const [inputValue, setInputValue] = useState<string>(rest.inputValue || '');
 
     useEffect(() => {
@@ -396,7 +394,7 @@ export const ComboboxComponent = forwardRef<HTMLInputElement, ComboboxProps>(
           <ComboboxInput
             {...omit(['inputValue'], rest)}
             hideClearButton={hideClearButton}
-            listId={listId}
+            listId={context.floatingId}
             error={error}
             hideChips={hideChips}
             handleKeyDown={handleKeyDown}
@@ -417,7 +415,6 @@ export const ComboboxComponent = forwardRef<HTMLInputElement, ComboboxProps>(
               visuallyHiddenDismiss
             >
               <div
-                id={listId}
                 aria-labelledby={formFieldProps.inputProps.id}
                 aria-autocomplete='list'
                 tabIndex={-1}

diff --git a/packages/react/src/components/form/Combobox/internal/ComboboxInput.tsx b/packages/react/src/components/form/Combobox/internal/ComboboxInput.tsx
@@ -137,7 +137,7 @@ const ComboboxInput = ({
               aria-autocomplete='list'
               role='combobox'
               aria-expanded={open}
-              aria-controls={listId}
+              aria-controls={open ? listId : undefined}
               autoComplete='off'
               size={htmlSize}
               value={inputValue}