[Autocomplete][Textfield] InputProps.inputProps isn't able to override.

[seungwoohong]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

An error 'Cannot read properties of null' has occurred on click autocomplete.

<Autocomplete
      sx={{ width: 300 }}
      options={options}
      autoHighlight
      getOptionLabel={(option) => option.label}
      renderOption={(props, option) => (
        <Box
          component="li"
          sx={{ "& > img": { mr: 2, flexShrink: 0 } }}
          {...props}
        >
          <img
            loading="lazy"
            width="20"
            src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
            srcSet={`https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`}
            alt=""
          />
          {option.label} ({option.code}) +{option.phone}
        </Box>
      )}
      renderInput={(params) => (
        <TextField
          {...params}
          label="Choose a country"
          InputProps={{
            inputProps: {}
          }}
          inputProps={{
            ...params.inputProps,
            autoComplete: "new-password" // disable autocomplete and autofill
          }}
        />
      )}
    />

Codesandbox

// packages/mui-material/src/TextField/TextField.js

  const InputElement = (
    <InputComponent
      aria-describedby={helperTextId}
      autoComplete={autoComplete}
      autoFocus={autoFocus}
      defaultValue={defaultValue}
      fullWidth={fullWidth}
      multiline={multiline}
      name={name}
      rows={rows}
      maxRows={maxRows}
      minRows={minRows}
      type={type}
      value={value}
      id={id}
      inputRef={inputRef}
      onBlur={onBlur}
      onChange={onChange}
      onFocus={onFocus}
      placeholder={placeholder}
      inputProps={inputProps}
      {...InputMore}
      {...InputProps}
    />
  );

Link

Is it a bug?

Expected behavior 🤔

In my opinion, It should be an error when assigning value in InputProps.inputProps.

Steps to reproduce 🕹

Steps:

1. 2. 3. 4.

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```

[mnajdova]

I apologize but I don't really understand what is the issue you are reporting. Here is a working example - https://codesandbox.io/s/countryselect-demo-material-ui-forked-n7v8ke?file=/demo.tsx

[seungwoohong]

I apologize for the lack of my explanation

Example code

  <Autocomplete
       renderInput={(params) => (
          <TextField
            {...params}
            label="Choose a country"
            InputProps={{
              inputProps: {}
            }} // I guess this code makes an error
            inputProps={{
              ...params.inputProps,
              autoComplete: "new-password"
          }}
        />
      )}
  />

After inserting InputProps into inputProps, clicking the input makes error as below

[nnguyen52]

I apologize for the lack of my explanation

Example code

  <Autocomplete

       renderInput={(params) => (

          <TextField

            {...params}

            label="Choose a country"

            InputProps={{

              inputProps: {}

            }} // I guess this code makes an error

            inputProps={{

              ...params.inputProps,

              autoComplete: "new-password"

          }}

        />

      )}

  />

After inserting InputProps into inputProps, clicking the input makes error as below

Why you add the line InputProps={{inputProps:{}}} ? Removing it seems work!

[seungwoohong]

@nnguyen52 Thanks for your suggestion. but I think inputProps should be omitted in the type of the props to avoid the error in advance.