[data grid] A form field element should have an id or name attribute

[Vagizova]

Steps to reproduce

Link to live example: example

Steps:

1. open console
2. you can see, there is a bunch of issues about checkboxes in selection columns

Current behavior

Inputs do not have name or id attr, so i have hundreds issues in my console. It is annoying

Expected behavior

No response

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: row selection checkboxes

[michelengelen]

Hey @Vagizova ... I cannot reproduce the issue you are facing. The only two errors I can see are those about the resizeObserver and the strictMode (a CSB bug apparently)

Locally it does not even show a single one of those

Could you elaborate on the issue you are facing a bit or share screen recordings and screenshots?

[Vagizova]

@michelengelen Hey, sure! Here it is: https://codesandbox.io/embed/kyppc4?module=/src/Demo.tsx&fontsize=12

screen-recording-2024-10-28-at-223851_avd4fAgA.mp4

[michelengelen]

Thanks @Vagizova ... adding a name or id should be very straightforward ... let me check real quick.

[michelengelen]

OK< so a fix for that should be fairly easy:

diff --git a/packages/x-data-grid/src/components/columnSelection/GridCellCheckboxRenderer.tsx b/packages/x-data-grid/src/components/columnSelection/GridCellCheckboxRenderer.tsx
index 5bfadd9b9..6ff8fcf96 100644
--- a/packages/x-data-grid/src/components/columnSelection/GridCellCheckboxRenderer.tsx
+++ b/packages/x-data-grid/src/components/columnSelection/GridCellCheckboxRenderer.tsx
@@ -107,6 +107,8 @@ const GridCellCheckboxForwardRef = React.forwardRef<HTMLInputElement, GridRender
         ? isChecked && !isIndeterminate
         : isChecked;

+    const checkBoxId = `checkbox_${id}`;
+
     return (
       <rootProps.slots.baseCheckbox
         ref={handleRef}
@@ -119,6 +121,7 @@ const GridCellCheckboxForwardRef = React.forwardRef<HTMLInputElement, GridRender
         indeterminate={isIndeterminate}
         disabled={!isSelectable}
         touchRippleRef={rippleRef as any /* FIXME: typing error */}
+        id={checkBoxId}
         {...rootProps.slotProps?.baseCheckbox}
         {...other}
       />
diff --git a/packages/x-data-grid/src/components/columnSelection/GridHeaderCheckbox.tsx b/packages/x-data-grid/src/components/columnSelection/GridHeaderCheckbox.tsx
index f968f9108..e01280f54 100644
--- a/packages/x-data-grid/src/components/columnSelection/GridHeaderCheckbox.tsx
+++ b/packages/x-data-grid/src/components/columnSelection/GridHeaderCheckbox.tsx
@@ -145,6 +145,7 @@ const GridHeaderCheckbox = React.forwardRef<HTMLButtonElement, GridColumnHeaderP
         tabIndex={tabIndex}
         onKeyDown={handleKeyDown}
         disabled={!isMultipleRowSelectionEnabled(rootProps)}
+        id={'checkbox_header'}
         {...rootProps.slotProps?.baseCheckbox}
         {...other}
       />

I'll open this up as a good first issue.

[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.

Note

@Vagizova 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.