From 2a384b0613b4108a881dd81b742c112f86ec2780 Mon Sep 17 00:00:00 2001 From: Paul Marbach Date: Tue, 11 Aug 2026 12:35:54 -0400 Subject: [PATCH] fix: use :scope instead of & in relative querySelector MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit getRowToScroll/getCellToScroll build a relative selector to find the focused row/cell within the grid element. They prefix it with the CSS-nesting `&` combinator. Chromium happens to accept `&` at the start of a querySelector argument, but the standard token for "the element querySelector was called on" is `:scope`. Environments whose selector engine follows the spec strictly — for example jsdom (nwsapi), widely used in unit tests — throw `SyntaxError: '& > [role="row"]...' is not a valid selector`, breaking header and cell focus. Use `:scope`, which is equivalent in the browser and valid everywhere. --- src/utils/domUtils.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/utils/domUtils.ts b/src/utils/domUtils.ts index 0d60d63b26..1803bb96ee 100644 --- a/src/utils/domUtils.ts +++ b/src/utils/domUtils.ts @@ -9,11 +9,11 @@ export function scrollIntoView(element: Maybe, behavior: ScrollBehavior } function getRowToScroll(gridEl: HTMLDivElement) { - return gridEl.querySelector('& > [role="row"][tabindex="0"]'); + return gridEl.querySelector(':scope > [role="row"][tabindex="0"]'); } export function getCellToScroll(gridEl: HTMLDivElement) { - return gridEl.querySelector('& > [role="row"] > [tabindex="0"]'); + return gridEl.querySelector(':scope > [role="row"] > [tabindex="0"]'); } function focusElement(element: HTMLDivElement | null, shouldScroll: boolean) {