From dc00c8e35ed6bedcaeaba385e85105f5894fcfd2 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Tue, 29 Jul 2025 10:08:02 +0100
Subject: [PATCH] Update Combobox.tsx

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 packages/ui/src/components/Menu/Combobox.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

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<HTMLDivElement, MenuComboboxProps>(
       ...rest
     } = props;
 
-    const triggerId = useId();
+    const triggerId = generateComboboxId();
     const listboxId = `${triggerId}-listbox`;
 
     // State management