[data grid] Clicking a focusable <g> element throws an error in the table after sorting a column DESC

[tom-vd-b]

[data grid] Clicking a focusable element throws an error in the table after sorting a column DESC

from mui-x.

[michelengelen]

Hey @tom-vd-b and thanks for raising this issue.
I can confirm that this is a bug we need to handle.

A quick look and the easiest fix would be to conditionally call includes when existent:

diff --git a/packages/x-data-grid/src/hooks/features/focus/useGridFocus.ts b/packages/x-data-grid/src/hooks/features/focus/useGridFocus.ts
index f39ae2f3a..9fe7636bf 100644
--- a/packages/x-data-grid/src/hooks/features/focus/useGridFocus.ts
+++ b/packages/x-data-grid/src/hooks/features/focus/useGridFocus.ts
@@ -331,7 +331,7 @@ export const useGridFocus = (

   const handleBlur = React.useCallback<GridEventListener<'columnHeaderBlur'>>(
     (_, event) => {
-      if (event.relatedTarget?.className.includes(gridClasses.columnHeader)) {
+      if (event.relatedTarget?.className.includes?.(gridClasses.columnHeader)) {
         return;
       }
       logger.debug(`Clearing focus`);

Any objections @MBilalShafi ?

[github-actions]

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@tom-vd-b: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.