[textfield] Typings for `formHelperText` slot missing data attributes

[thany]

Steps to reproduce

Steps:

1. Open this link to live example: https://stackblitz.com/edit/e8yxd8yt?file=src%2FDemo.tsx
2. Observe the error in the editor.

Current behavior

There is an error on slotProps -> formHelperText -> any data attribute. This error doesn't occur for htmlInput.

Expected behavior

No error, data attributes should be added to the typings, as they are for other slotProps.

Context

It's important to remember that this is purely a typings issue. At run-time it works perfectly.

Your environment

npx @mui/envinfo

  System:
    OS: Windows 10 10.0.19045
  Binaries:
    Node: 22.21.0 - C:\Program Files\nodejs\node.EXE
    npm: 11.6.2 - C:\Program Files\nodejs\npm.CMD
    pnpm: Not Found
  Browsers:
    Chrome: 142.0.7444.135
    Edge: Chromium (141.0.3537.99)
    Firefox: 144.0.2 - C:\Program Files\Mozilla Firefox\firefox.exe

I'm using Firefox 144 (not that it matters)

Search keywords: formHelperText data attributes

[thany]

I just found the same problem exists for Select -> slotProps -> input. It too doesn't allow data-attributes as far as the typings go.

Live example has been updated to show this.

[ZeeshanTamboli]

This looks similar to #33175.

We won't support it directly for now but we can add a type that you can augment on your side using module augmentation:

declare module '@mui/material/TextField' {
  interface TextFieldFormHelperTextSlotPropsOverrides {
    'data-cy'?: string;
  }
}

But for that the fix would be to support it:

@@ -50,6 +50,8 @@ export interface TextFieldSlots {
   select: React.ElementType;
 }

+export interface TextFieldFormHelperTextSlotPropsOverrides {}
+
 export type TextFieldSlotsAndSlotProps<InputPropsType> = CreateSlotsAndSlotProps<
   TextFieldSlots,
   {
@@ -77,7 +79,11 @@ export type TextFieldSlotsAndSlotProps<InputPropsType> = CreateSlotsAndSlotProps
      * Props forwarded to the form helper text slot.
      * By default, the available props are based on the [FormHelperText](https://mui.com/material-ui/api/form-helper-text
/#props) component.
      */
-    formHelperText: SlotProps<React.ElementType<FormHelperTextProps>, {}, TextFieldOwnerState>;
+    formHelperText: SlotProps<
+      React.ElementType<FormHelperTextProps>,
+      TextFieldFormHelperTextSlotPropsOverrides,
+      TextFieldOwnerState
+    >;
     /**
      * Props forwarded to the select slot.
      * By default, the available props are based on the [Select](https://mui.com/material-ui/api/select/#props) component

As for htmlInput slot working, it is because of TextField html input allowing any attributes. See #33175 (comment). This is a known inconsistency which is a separate issue.

---

I just found the same problem exists for Select -> slotProps -> input. It too doesn't allow data-attributes as far as the typings go.

You can augment InputBase input with:

declare module '@mui/material/InputBase' {
  interface InputBaseComponentsPropsOverrides {
    'data-cy'?: string;
  }
}

See: https://stackblitz.com/edit/e8yxd8yt-fwegcdh9?file=src%2FDemo.tsx