diff --git a/packages/react/src/components/ComboBox/ComboBox.tsx b/packages/react/src/components/ComboBox/ComboBox.tsx index 3fa05acf5ae3..9fdf344dd3e5 100644 --- a/packages/react/src/components/ComboBox/ComboBox.tsx +++ b/packages/react/src/components/ComboBox/ComboBox.tsx @@ -13,6 +13,7 @@ import React, { useEffect, useState, useRef, + useMemo, forwardRef, type ReactNode, type ComponentType, @@ -655,6 +656,15 @@ const ComboBox = forwardRef( (helperText && !isFluid && helperTextId) || undefined; + const menuProps = useMemo( + () => + getMenuProps({ + 'aria-label': deprecatedAriaLabel || ariaLabel, + ref: autoAlign ? refs.setFloating : null, + }), + [autoAlign, deprecatedAriaLabel, ariaLabel] + ); + return (
{titleText && ( @@ -674,7 +684,7 @@ const ComboBox = forwardRef( light={light} size={size} warn={warn} - ref={refs.setReference} + ref={autoAlign ? refs.setReference : null} warnText={warnText} warnTextId={warnTextId}>
@@ -686,7 +696,7 @@ const ComboBox = forwardRef( aria-haspopup="listbox" title={textInput?.current?.value} {...getInputProps({ - 'aria-controls': isOpen ? undefined : getMenuProps().id, + 'aria-controls': isOpen ? undefined : menuProps.id, placeholder, ref: { ...mergeRefs(textInput, ref) }, onKeyDown: ( @@ -785,11 +795,7 @@ const ComboBox = forwardRef( />
{normalizedSlug} - + {isOpen ? filterItems(items, itemToString, inputValue).map( (item, index) => {