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

[tom-vd-b]

Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/frosty-ben-k976m8

Steps:

1. sort the table desc on column Quantity (click twice)
2. now click on the black circle below the table
3. error:
   1. current result: throws error in console Uncaught TypeError: event.relatedTarget.className.includes is not a function.
   2. expected result: no error is thrown in the console.

Current behavior

current result: throws error in console Uncaught TypeError: event.relatedTarget.className.includes is not a function.

Expected behavior

no error is thrown in the console.

Context

User clicks outside the table in an svg after sorting a column in the table descending.

possible fix:

change src/hooks/features/focus/useGridFocus.ts line 334 to

if (event.relatedTarget?.className?.includes(gridClasses.columnHeader)) {

Your environment

npx @mui/envinfo

``` System: OS: Windows 10 10.0.19045 Binaries: Node: 18.16.0 - C:\Program Files\nodejs\node.EXE npm: 8.18.0 - C:\Program Files\nodejs\npm.CMD pnpm: Not Found Browsers: Chrome: Not Found Edge: Chromium (123.0.2420.97) ``` used browser : chrome

Search keywords: data-grid-pro, focus, sorting error

Search keywords:

[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[bot]]

:warning: 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.