[Autocomplete] Prop-Types is missing in prop validation

[Enzo-PVsyst]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Steps:

1. create a fresh react projet
2. install prop-types
3. install react hook form
4. install mui
5. create a new component in which you use Autocomplete
6. use controller with autocomplete :

       <Controller
           name="test"
           control={control}
           render={(props) => (
             <Autocomplete
               options={options
               value={props.value}
               onChange={(e, values) => setValue("test", values)}
               renderInput={(params) => (
                 <TextField
                   {...params}
                   label={"Test"}
                 />
               )}
               filterOptions={filter}
               getOptionLabel={(row) => {
                 return row.name;
               }}
             />
           )}
         />

7. run linter

Current behavior 😯

Linter throws warning warning 'value' is missing in props validation react/prop-types

Expected behavior 🤔

No warning thrown

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

``` System: OS: Linux 5.15 Alpine Linux Binaries: Node: 20.4.0 - /usr/local/bin/node Yarn: 1.22.19 - /usr/local/bin/yarn npm: 9.7.2 - /usr/local/bin/npm Browsers: Chrome: Not Found npmPackages: @emotion/react: ^11.11.1 => 11.11.1 @emotion/styled: ^11.11.0 => 11.11.0 @mui/base: 5.0.0-beta.7 @mui/core-downloads-tracker: 5.14.0 @mui/icons-material: ^5.14.0 => 5.14.0 @mui/material: ^5.14.0 => 5.14.0 @mui/private-theming: 5.13.7 @mui/styled-engine: 5.13.2 @mui/system: 5.14.0 @mui/types: 7.2.4 @mui/utils: 5.13.7 @mui/x-data-grid: 6.9.2 @mui/x-data-grid-generator: ^6.9.2 => 6.9.2 @mui/x-data-grid-premium: ^6.9.2 => 6.9.2 @mui/x-data-grid-pro: 6.9.2 @mui/x-date-pickers: ^6.10.0 => 6.10.0 @mui/x-license-pro: 6.9.0 @types/react: 18.2.14 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 typescript: 4.9.5 ```

[mj12albert]

@Zozo-Syst In your snippet, the props in props.value are the props provided by the Controller component from RHF, not Material UI

According to the RHF docs for Controller I think you're looking for field.value and not value

Here's a working sandbox with the Material UI autocomplete wired to RHF: https://codesandbox.io/s/material-ui-autocomplete-rhf-hry7yp?file=/src/App.tsx:569-598

[Enzo-PVsyst]

I can't have your sandbox working, it doesn't display anything in it.

I still tried to implement it in the code I got and it's not displaying any options when filling the input.

Concerning props.value, I can't find again the stackoverflow post I followed, but it was needed to make it work with MUI Autocomplete.

Since Autocomplete is having trouble with RHF, it might be related to that props issue.

EDIT : After many tries with the track you gave me, I could make it work.

I kept my code and just changed the value given with the one from field as you suggested :

 <Controller
            name="test"
            control={control}
            render={({ field: { value } }) => (
              <Autocomplete
                options={options
                value={props.value}
                onChange={(e, values) => setValue("test", values)}
                renderInput={(params) => (
                  <TextField
                    {...params}
                    label={"Test"}
                  />
                )}
                filterOptions={filter}
                getOptionLabel={(row) => {
                  return row.name;
                }}
              />
            )}
          />