material-ui: [Migration] Unable to find the input element. It was resolved to [object HTMLDivElement] while an HTMLInputElement was expected.

The issue is present in the latest release.
I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

I am getting this error:

index.js:1 MUI: Unable to find the input element. It was resolved to [object HTMLDivElement] while an HTMLInputElement was expected.
Instead, Autocomplete expects an input element.

Make sure you have customized the input component correctly.

When I use autocomplete like this:

<Autocomplete
      freeSolo
      autoHighlight
      style={{ width: 350 }}
      open={open}
      onOpen={() => setOpen(true)}
      onClose={() => setOpen(false)}
      onChange={(_event, user) =>
        router.push(`/projects/${project.id}/users/${user.id}`)
      }
      onInputChange={(_event, newValue) => setValue(newValue)}
      isOptionEqualToValue={(option, optionTwo) => option.id === optionTwo.id}
      getOptionLabel={(user) => presentUser(user, project)}
      groupBy={(user) => capitalizeFirstLetter(user.userType)}
      options={options}
      loading={loading}
      renderInput={(params) => (
        <div ref={params.InputProps.ref}>
          <Input
            {...params.inputProps}
            variant="filled"
            className={classes.searchInput}
            classes={{ underline: classes.searchInputUnderline }}
            placeholder="Search"
            startAdornment={
              <InputAdornment position="start">
                <Search />
              </InputAdornment>
            }
            endAdornment={
              <>
                {loading ? (
                  <CircularProgress color="inherit" size={20} />
                ) : null}
                {params.InputProps.endAdornment}
              </>
            }
            type="text"
          />
        </div>
      )}
    />

It worked with v4. According to the documentation it seems like I am doing it correctly.

Expected Behavior 🤔

No errors should happen.

Context 🔦

Simply trying to upgrade to v5

Your Environment 🌎

Chrome.

`npx @mui/envinfo`

  System:
    OS: macOS 11.3.1
  Binaries:
    Node: 14.17.1 - ~/.nvm/versions/node/v14.17.1/bin/node
    Yarn: 1.22.11 - /opt/homebrew/bin/yarn
    npm: 7.23.0 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 93.0.4577.82
    Edge: Not Found
    Firefox: Not Found
    Safari: 14.1
  npmPackages:
    @emotion/react: ^11.4.1 => 11.4.1
    @emotion/styled: ^11.3.0 => 11.3.0
    @mui/core:  5.0.0-alpha.49
    @mui/icons-material: ^5.0.1 => 5.0.1
    @mui/lab: ^5.0.0-alpha.49 => 5.0.0-alpha.49
    @mui/material: ^5.0.2 => 5.0.2
    @mui/private-theming:  5.0.1
    @mui/styled-engine:  5.0.1
    @mui/styles: ^5.0.1 => 5.0.1
    @mui/system:  5.0.2
    @mui/types:  7.0.0
    @mui/utils:  5.0.1
    @mui/x-data-grid: ^4.0.0 => 4.0.0
    @types/react:  17.0.22
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.2 => 17.0.2

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 2
Comments: 27 (9 by maintainers)

Most upvoted comments

I had this issue, solved by adding {…params.inputProps} to the input in the renderInput props as per https://mui.com/material-ui/react-autocomplete/#combo-box

Please note that it is inputProps NOT InputProps, hope it helps.

renderInput={(params) => (
        <TextField
          {...params}
          label="Choose a country"
          inputProps={{
            ...params.inputProps, // HERE 
            autoComplete: 'new-password', // disable autocomplete and autofill
          }}
        />
      )}
      ```

+16

T04435 on Sep 7, 2022

So I managed to find the issue. This line:

      renderInput={(params) => (
        <Root ref={params.InputProps.ref}>
          <Input
            { ...params.inputProps }

Had to be changed to:

      renderInput={(params) => (
        <Root ref={params.InputProps.ref}>
          <Input
            inputProps={{ ...params.inputProps }}

Since I was using which itself is not directly an , but rather a div with an input inside

+15

simplenotezy on Oct 21, 2021

Anyone solve this while using the custom hook useAutoComplete?

mattbf on Dec 7, 2022

@eps1lon Is the above example enough for this issue to be reopened?

imnasnainaec on May 2, 2023

@eps1lon Here’s a minimal example of the console error showing up when using Autocomplete with react-test-renderer: https://codesandbox.io/s/react-test-renderer-forked-lnv39f

imnasnainaec on Apr 18, 2023

I had this issue, solved by adding {…params.inputProps} to the input in the renderInput props as per https://mui.com/material-ui/react-autocomplete/#combo-box

Please note that it is inputProps NOT InputProps, hope it helps.
renderInput={(params) => (
        <TextField
          {...params}
          label="Choose a country"
          inputProps={{
            ...params.inputProps, // HERE 
            autoComplete: 'new-password', // disable autocomplete and autofill
          }}
        />
      )}
      ```

Thanks a lot, the error has gone after I added “inputProps” and set its value by a clone of the “getInputProps” function which used in the UseAutoComplete custom hook

Monaf-daod on Mar 1, 2023