Conversation
| ); | ||
| }; | ||
| render( | ||
| <AdminContext dataProvider={testDataProvider()}> |
There was a problem hiding this comment.
plezase reuse stories instead of writing the system under test here
There was a problem hiding this comment.
Done. The test now renders a new RenderInputFieldRef story.
| /> | ||
| </Wrapper> | ||
| ); | ||
|
|
There was a problem hiding this comment.
since the original issue was about showing option groups, I think we should demonstrate this is possible with another story
There was a problem hiding this comment.
Added a RenderInputWithGroups story: grouped options with the selected option shown as a custom component (the use case from #10430), plus a test for it.
| TextField, | ||
| type TextFieldProps, | ||
| major as muiMajor, | ||
| setRef, |
There was a problem hiding this comment.
I can't find any documentation on the MUI website about this function. Is it public API?
There was a problem hiding this comment.
it's exported from @mui/material but not documented. I replaced it with a small local assignRef helper.
Problem
Closes #10430.
<AutocompleteInput>already forwardsrenderInputto MUI's Autocomplete at runtime, butAutocompleteInputPropsomits it, so TypeScript users can't override the input rendering (e.g. to show a custom component for the selected option when grouping). Also, because the customrenderInputbypassed react-admin's default rendering, the form field ref was never attached, so react-hook-form couldn't focus the input (e.g. on validation errors).Solution
Expose
renderInputas an optional prop. Regarding the feedback on #11132: simply removingrenderInputfrom theOmitlist would make it a required prop, since it's required in MUI'sAutocompleteProps, breaking every existing usage. So it's re-declared as optional, reusing MUI's type.The custom
renderInputis now called explicitly, with the form field ref merged intoparams.inputProps.ref, so focus management keeps working.How To Test
ra-ui-materialui/input/AutocompleteInput→ Render Inputyarn test-unit packages/ra-ui-materialui/src/input/AutocompleteInput.spec.tsxAdditional Checks
nextfor a feature