diff --git a/packages/ui/src/components/Menu/Combobox.tsx b/packages/ui/src/components/Menu/Combobox.tsx index 2d74d52a40..9eeea446e9 100644 --- a/packages/ui/src/components/Menu/Combobox.tsx +++ b/packages/ui/src/components/Menu/Combobox.tsx @@ -19,7 +19,6 @@ import { useState, useMemo, useCallback, - useId, ChangeEvent, KeyboardEvent, useRef, @@ -29,6 +28,13 @@ import clsx from 'clsx'; import { MenuComboboxOption, MenuComboboxProps } from './types'; import { Icon } from '../..'; +// React 17 compatible unique ID generator +let comboboxIdCounter = 0; +function generateComboboxId(): string { + comboboxIdCounter += 1; + return `combobox-${comboboxIdCounter.toString(36)}`; +} + const getListboxItemId = (listboxId: string, optionValue: string): string => `${listboxId}-option-${optionValue}`; @@ -96,7 +102,7 @@ export const Combobox = forwardRef( ...rest } = props; - const triggerId = useId(); + const triggerId = generateComboboxId(); const listboxId = `${triggerId}-listbox`; // State management