Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React does not recognize the `InputProps` prop on a DOM element

Error stacktrace screenshot

Warning: React does not recognize the InputProps prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase inputprops instead. If you accidentally passed it from a parent component, remove it from the DOM element.

I don't understand what I'm doing wrong. And I've seen many similar issues like this. But I couldn't see a proper solution.

<TextField
  {...input}
  {...rest}
  name={input.name}
  inputRef={inputRef}
  autoFocus={inputRef.current === document.activeElement}
  disabled={disabled || false}
  multiline={rowCount ? true : false}
  style={{
    width: "100%",
  }}
  onChange={(event) => {
    input.onChange(event.target.value);
  }}
  {...(hesapla
    ? {
        onBlur: (e) => {
          hesapla({ name: input.name, value: input.value });
        },
        onKeyDown: (e) => {
          if (e.key === "Enter") {
            hesapla({ name: input.name, value: input.value });
            e.preventDefault();
          }
        },
      }
    : {})}
  InputProps={{
    classes,
    ...(inputComponent ? { inputComponent: inputComponent } : {}),
    ...(endAdornment ? { endAdornment: endAdornment } : {}),
  }}
  inputProps={{
    style: {
      maxHeight: (rowCount * 16).toString() + "px",
      overflow: "auto",
      ...(rightJustify ? { textAlign: "end" } : {}),
      ...(!readOnly && hesapla
        ? { fontWeight: "bold", borderBottom: "2px solid" }
        : {}),
    },
    readOnly: readOnly ? readOnly : false,
  }}
></TextField>

enter image description here

enter image description here

like image 545
Mümin ZEHİR Avatar asked Sep 18 '25 21:09

Mümin ZEHİR


2 Answers

the issue is that you are using inputProps instead of InputProps

like image 148
Aman Jha Avatar answered Sep 21 '25 12:09

Aman Jha


Those who came to this post and using MUI Autocomplete, the culprit is your input element. Autocomplete widget by default expects you to use Textfield Input as of now. (the params passed to the input element are only available on Textfield widget, see image below).

TextField Textfield Input Component

Input Base InputBase Input component

If you want to use any other input field, extract the props from the params passed and pass the desired props to your input element. Like, i used InputBase component and passed only inputProps not InputProps to it. You can find the available properties in MUI documentation.

like image 28
Mahesh Gupta Avatar answered Sep 21 '25 12:09

Mahesh Gupta