BaseInputTemplate fails to forward props to child

[mrozekma]

Prerequisites

• I have searched the existing issues
• I understand that providing a SSCCE example is tremendously useful to the maintainers.
• I have read the documentation
• Ideally, I'm providing a sample JSFiddle, Codesandbox.io or preferably a shared playground link demonstrating the issue.

What theme are you using?

mui

Version

5.24.3

Current Behavior

Commit 70d7c73 changed BaseInputTemplate in a way that's causing me errors. As of that commit I started getting this error in my console:

react-dom.development.js:86 Warning: React does not recognize the `slotProps` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `slotprops` instead. If you accidentally passed it from a parent component, remove it from the DOM element. Error Component Stack
    at div (<anonymous>)
    at emotion-element-43c6fea0.browser.esm.js:37:17
    at FormControl2 (FormControl.js:84:17)
    at emotion-element-43c6fea0.browser.esm.js:37:17
    at TextField2 (TextField.js:77:17)
    at BaseInputTemplate2 (ErrorList.tsx:28:5)
    at TextWidget (TimeWidget.tsx:10:11)
    at MergedWidget (getWidget.tsx:78:23)
    at StringField (NullField.tsx:20:5)
    at div (<anonymous>)
    at emotion-element-43c6fea0.browser.esm.js:37:17
    at FormControl2 (FormControl.js:84:17)
    at div (<anonymous>)
    at WrapIfAdditionalTemplate2 (Templates.ts:24:5)
    at FieldTemplate2 (Templates.ts:23:5)
    at SchemaFieldRender (SchemaField.tsx:109:13)
    at SchemaField (SchemaField.tsx:357:1)
    at div (<anonymous>)
    at emotion-element-43c6fea0.browser.esm.js:37:17
    at Grid3 (Grid.js:367:22)
    at div (<anonymous>)
    at emotion-element-43c6fea0.browser.esm.js:37:17
    at Grid3 (Grid.js:367:22)
    at ObjectFieldTemplate2 (Templates.ts:26:5)
    at ObjectField (ObjectField.tsx:40:1)
    at div (<anonymous>)
    at emotion-element-43c6fea0.browser.esm.js:37:17
    at FormControl2 (FormControl.js:84:17)
    at div (<anonymous>)
    at WrapIfAdditionalTemplate2 (Templates.ts:24:5)
    at FieldTemplate2 (Templates.ts:23:5)
    at SchemaFieldRender (SchemaField.tsx:109:13)
    at SchemaField (SchemaField.tsx:357:1)
    at form (<anonymous>)
    at Form3 (Form.tsx:284:5)
    at withTheme.tsx:18:8
    at div (<anonymous>)
    at CardBody (CardBody.tsx:17:3)
    at div (<anonymous>)
    at Card (Card.tsx:89:3)

I don't fully understand the error, but it seems like it's trying to apply slotProps from here directly onto a regular HTML element, and failing. The side-effect of this I've run into is HTML5 validation is broken on Input fields; a field with minimum and maximum settings in the schema doesn't have min/max attributes in the DOM:

<input aria-invalid="false" id="XXX" name="XXX" placeholder="" required="" type="number" class="MuiInputBase-input MuiOutlinedInput-input css-p51h6s-MuiInputBase-input-MuiOutlinedInput-input" value="10">

Expected Behavior

Prior to the mentioned commit, I wouldn't get the error about slotProps, and the HTML element would be:

<input aria-invalid="false" id="XXX" name="XXX" placeholder="" required="" type="number" step="1" min="1" max="1000" class="MuiInputBase-input MuiOutlinedInput-input css-p51h6s-MuiInputBase-input-MuiOutlinedInput-input" value="10">

Steps To Reproduce

Unfortunately I'm not sure, I'm unable to reproduce this in the playground, so it may be something subtle I've messed up in my usage, but I'm not doing anything exciting:

import Form from "@rjsf/mui";

...

return (
            <Form
              schema={schema}
              uiSchema={uiSchema}
              formData={data}
              validator={validator}
              onChange={onChange}
              onSubmit={onSubmit}
              onError={onError}
              transformErrors={transformErrors}
              showErrorList={false}
              disabled={loading}
            >
              <Flex spacer={{ default: 'spacerSm' }}>
                <FlexItem>
                    <Button variant="primary" type="submit" isDisabled={loading}>Save</Button>
                </FlexItem>
              </Flex>
            </Form>
);

Environment

- OS: Rocky Linux 9.5
- Node: 20.17.0
- npm: 10.8.2

Anything else?

No response

[nickgros]

It looks like in MUI v5, we need to use the inputProps prop to pass this data, and in MUI v6/v7, we need to use the slotProps.htmlInput.

@abdalla-rko would you be able to fix this breaking change in main/RJSF v5 so we always use inputProps (which should work in v6, it's just deprecated).

In RJSF v6, we will require MUI v7 and drop support for MUI v5 and v6, so we can use theslotProps API.

[bleonard]

I'm seeing this too. Noting to get updates.

[bleonard]

Thanks!

[bleonard]

This is great. Can you post here when it's pushed to npm