Repository navigation
[DataGrid] Focus the column header when clicking the sort icon - #23947
Merged
Merged
Conversation
Clicking the sort icon focused the icon button. Once the sort was removed and the pointer left the header, the button was hidden and focus fell back to `document.body`, breaking keyboard navigation. Move focus to the column header instead, matching a click on the header title. Fixes mui#23940
JCQuintas
added
type: bug
Deploy previewBundle size
Check out the code infra dashboard for more information about this PR. |
JCQuintas
marked this pull request as ready for review
October 21, 2026 12:00
arminmeh
approved these changes
Oct 21, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #23940
Summary
Clicking a column header's sort icon moved focus to the icon button. After removing the sort with it and moving the pointer out of the header, the icon container became
visibility: hidden, the browser dropped focus todocument.body, and arrow-key navigation stopped working. Clicking the header title never had this problem because focus stays on the header cell.GridColumnHeaderSortIconnow callsapiRef.current.setColumnHeaderFocus(field)on click, so focus lands on the header cell in both cases.hideColumnMenuuses the same call to restore focus when the column menu closes. It also keeps the grid's focus state in sync, which was previously cleared while the button held focus.