diff --git a/packages/@react-aria/combobox/src/useComboBox.ts b/packages/@react-aria/combobox/src/useComboBox.ts index d1aa75cc636..2e72e353895 100644 --- a/packages/@react-aria/combobox/src/useComboBox.ts +++ b/packages/@react-aria/combobox/src/useComboBox.ts @@ -122,7 +122,7 @@ export function useComboBox(props: AriaComboBoxOptions, state: ComboBoxSta // If the focused item is a link, trigger opening it. Items that are links are not selectable. if (state.isOpen && state.selectionManager.focusedKey != null && state.selectionManager.isLink(state.selectionManager.focusedKey)) { if (e.key === 'Enter') { - let item = listBoxRef.current.querySelector(`[data-key="${state.selectionManager.focusedKey}"]`); + let item = listBoxRef.current.querySelector(`[data-key="${CSS.escape(state.selectionManager.focusedKey.toString())}"]`); if (item instanceof HTMLAnchorElement) { router.open(item, e); } diff --git a/packages/@react-aria/grid/src/GridKeyboardDelegate.ts b/packages/@react-aria/grid/src/GridKeyboardDelegate.ts index 7f6a8d264ea..23d48a0a252 100644 --- a/packages/@react-aria/grid/src/GridKeyboardDelegate.ts +++ b/packages/@react-aria/grid/src/GridKeyboardDelegate.ts @@ -270,7 +270,7 @@ export class GridKeyboardDelegate> implements Key } private getItem(key: Key): HTMLElement { - return this.ref.current.querySelector(`[data-key="${key}"]`); + return this.ref.current.querySelector(`[data-key="${CSS.escape(key.toString())}"]`); } private getItemRect(key: Key): Rect { diff --git a/packages/@react-aria/selection/src/ListKeyboardDelegate.ts b/packages/@react-aria/selection/src/ListKeyboardDelegate.ts index 870105a961b..112ace2f1cb 100644 --- a/packages/@react-aria/selection/src/ListKeyboardDelegate.ts +++ b/packages/@react-aria/selection/src/ListKeyboardDelegate.ts @@ -195,7 +195,7 @@ export class ListKeyboardDelegate implements KeyboardDelegate { } private getItem(key: Key): HTMLElement { - return this.ref.current.querySelector(`[data-key="${key}"]`); + return this.ref.current.querySelector(`[data-key="${CSS.escape(key.toString())}"]`); } getKeyPageAbove(key: Key) { diff --git a/packages/@react-aria/selection/src/useSelectableCollection.ts b/packages/@react-aria/selection/src/useSelectableCollection.ts index b9d3584593c..802338b1d94 100644 --- a/packages/@react-aria/selection/src/useSelectableCollection.ts +++ b/packages/@react-aria/selection/src/useSelectableCollection.ts @@ -140,7 +140,7 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions manager.setFocusedKey(key, childFocus); }); - let item = scrollRef.current.querySelector(`[data-key="${key}"]`); + let item = scrollRef.current.querySelector(`[data-key="${CSS.escape(key.toString())}"]`); router.open(item, e); return; @@ -342,7 +342,7 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions if (!isVirtualized && manager.focusedKey != null) { // Refocus and scroll the focused item into view if it exists within the scrollable region. - let element = scrollRef.current.querySelector(`[data-key="${manager.focusedKey}"]`) as HTMLElement; + let element = scrollRef.current.querySelector(`[data-key="${CSS.escape(manager.focusedKey.toString())}"]`) as HTMLElement; if (element) { // This prevents a flash of focus on the first/last element in the collection, or the collection itself. if (!element.contains(document.activeElement)) { @@ -404,7 +404,7 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions useEffect(() => { let modality = getInteractionModality(); if (manager.isFocused && manager.focusedKey != null && scrollRef?.current) { - let element = scrollRef.current.querySelector(`[data-key="${manager.focusedKey}"]`) as HTMLElement; + let element = scrollRef.current.querySelector(`[data-key="${CSS.escape(manager.focusedKey.toString())}"]`) as HTMLElement; if (element && (modality === 'keyboard' || autoFocusRef.current)) { if (!isVirtualized) { scrollIntoView(scrollRef.current, element); diff --git a/packages/@react-spectrum/tabs/src/Tabs.tsx b/packages/@react-spectrum/tabs/src/Tabs.tsx index 5a0e869916f..4de44904acd 100644 --- a/packages/@react-spectrum/tabs/src/Tabs.tsx +++ b/packages/@react-spectrum/tabs/src/Tabs.tsx @@ -80,7 +80,7 @@ function Tabs(props: SpectrumTabsProps, ref: DOMRef { if (tablistRef.current) { - let selectedTab: HTMLElement = tablistRef.current.querySelector(`[data-key="${tabListState?.selectedKey}"]`); + let selectedTab: HTMLElement = tablistRef.current.querySelector(`[data-key="${CSS.escape(tabListState?.selectedKey?.toString())}"]`); if (selectedTab != null) { setSelectedTab(selectedTab);