From dc00c8e35ed6bedcaeaba385e85105f5894fcfd2 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Tue, 29 Jul 2025 10:08:02 +0100 Subject: [PATCH 1/4] Update Combobox.tsx Signed-off-by: Charles de Dreuille --- 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( ...rest } = props; - const triggerId = useId(); + const triggerId = generateComboboxId(); const listboxId = `${triggerId}-listbox`; // State management From d4e603e023416ee4d2bccf12ab48f29b36b4ec31 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Tue, 29 Jul 2025 10:39:51 +0100 Subject: [PATCH 2/4] Create polite-trains-notice.md Signed-off-by: Charles de Dreuille --- .changeset/polite-trains-notice.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/polite-trains-notice.md diff --git a/.changeset/polite-trains-notice.md b/.changeset/polite-trains-notice.md new file mode 100644 index 0000000000..6752cda799 --- /dev/null +++ b/.changeset/polite-trains-notice.md @@ -0,0 +1,5 @@ +--- +'@backstage/ui': patch +--- + +Updated Combobox to not use the useId() hook to support React 17. From 6808eb471c053ef7300a6b2a8108d40ddd67357b Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Tue, 29 Jul 2025 15:51:46 +0100 Subject: [PATCH 3/4] Update Combobox.tsx Signed-off-by: Charles de Dreuille --- packages/ui/src/components/Menu/Combobox.tsx | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/packages/ui/src/components/Menu/Combobox.tsx b/packages/ui/src/components/Menu/Combobox.tsx index 9eeea446e9..796b0921ad 100644 --- a/packages/ui/src/components/Menu/Combobox.tsx +++ b/packages/ui/src/components/Menu/Combobox.tsx @@ -27,13 +27,7 @@ import { 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)}`; -} +import { useId } from 'react-aria'; const getListboxItemId = (listboxId: string, optionValue: string): string => `${listboxId}-option-${optionValue}`; @@ -102,7 +96,7 @@ export const Combobox = forwardRef( ...rest } = props; - const triggerId = generateComboboxId(); + const triggerId = useId(); const listboxId = `${triggerId}-listbox`; // State management From 9853338f308faad7a3e3c6d3dfc83764f970ca29 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Tue, 29 Jul 2025 15:59:43 +0100 Subject: [PATCH 4/4] Update polite-trains-notice.md Signed-off-by: Charles de Dreuille --- .changeset/polite-trains-notice.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/polite-trains-notice.md b/.changeset/polite-trains-notice.md index 6752cda799..6b204b2b10 100644 --- a/.changeset/polite-trains-notice.md +++ b/.changeset/polite-trains-notice.md @@ -2,4 +2,4 @@ '@backstage/ui': patch --- -Updated Combobox to not use the useId() hook to support React 17. +Updated Menu component in Backstage UI to use useId() from React Aria instead of React to support React 17.