Skip to content

fix: use :scope instead of & in relative querySelector - #4131

Open
fastfrwrd wants to merge 1 commit into
Comcast:mainfrom
grafana:fix/querySelector-scope-selector
Open

fix: use :scope instead of & in relative querySelector#4131
fastfrwrd wants to merge 1 commit into
Comcast:mainfrom
grafana:fix/querySelector-scope-selector

Conversation

@fastfrwrd

Copy link
Copy Markdown

Summary

getRowToScroll / getCellToScroll in src/utils/domUtils.ts build a relative selector to locate the focused row/cell inside the grid element, prefixed with the CSS-nesting & combinator:

gridEl.querySelector('& > [role="row"] > [tabindex="0"]')

Chromium accepts a leading & in a querySelector argument, but the standard token for "the element querySelector was called on" is :scope. Selector engines that follow the spec strictly — notably jsdom (nwsapi), widely used in unit tests — throw:

SyntaxError: '& > [role="row"] > [tabindex="0"]' is not a valid selector

This breaks header/cell focus (selectHeaderCellsetPositiongetCellToScroll) in any jsdom-based test that clicks a header, and anywhere the engine doesn't special-case &.

Change

Replace the leading & with :scope in both helpers. :scope > … is equivalent in the browser and valid across DOM implementations. No in-browser behavior change; the existing browser test suite is unaffected.

🤖 Generated with Claude Code

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.
@codecov-commenter

Copy link
Copy Markdown

⚠️ Please install the 'codecov app svg image' to ensure uploads and comments are reliably processed by Codecov.

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.54%. Comparing base (ddff926) to head (2a384b0).

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #4131   +/-   ##
=======================================
  Coverage   97.54%   97.54%           
=======================================
  Files          39       39           
  Lines        1588     1588           
  Branches      515      515           
=======================================
  Hits         1549     1549           
  Misses         39       39           
Files with missing lines Coverage Δ
src/utils/domUtils.ts 100.00% <100.00%> (ø)
🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants