Escape strings used in query selectors (#5565)

adobe · Dec 13, 2023 · eb21e69 · eb21e69 · rspbot · Dec 13, 2023
1 parent 414f408
commit eb21e69
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 7 deletions.
diff --git a/packages/@react-aria/combobox/src/useComboBox.ts b/packages/@react-aria/combobox/src/useComboBox.ts
@@ -122,7 +122,7 @@ export function useComboBox<T>(props: AriaComboBoxOptions<T>, 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
@@ -270,7 +270,7 @@ export class GridKeyboardDelegate<T, C extends GridCollection<T>> 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
@@ -195,7 +195,7 @@ export class ListKeyboardDelegate<T> 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
@@ -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
@@ -80,7 +80,7 @@ function Tabs<T extends object>(props: SpectrumTabsProps<T>, ref: DOMRef<HTMLDiv
 
   useEffect(() => {
     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);