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 ponent, 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>

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 ponent, 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>

• javascript
• reactjs
• material-ui

• It uses InputProps in its Material UI TextField instances. And I use it in my own code following the same path. – Mümin ZEHİR Commented Nov 3, 2021 at 8:15
• Which MUI do you have? – Mario Nikolaus Commented Nov 3, 2021 at 8:25
• "@material-ui/core": "4.11.0", "@material-ui/data-grid": "^4.0.0-alpha.20", "@material-ui/docs": "4.0.0-beta.3", "@material-ui/icons": "4.9.1", "@material-ui/lab": "4.0.0-alpha.56", "@material-ui/pickers": "3.2.10", "@material-ui/styles": "4.10.0", "@material-ui/system": "4.9.14", – Mümin ZEHİR Commented Nov 3, 2021 at 8:41

3 Answers 3

the issue is that you are using inputProps instead of InputProps

Those who came to this post and using MUI Autoplete, the culprit is your input element. Autoplete 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

Input Base

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 ponent and passed only inputProps not InputProps to it. You can find the available properties in MUI documentation.

The problem is with your InputProps object, according to the documentation, it uses an object, you didn't pass a proper object to it.

So, if you want to realize this issue, I suggest you create your InputProps entry as a variable and log it:

const myInputPropsObject = {
    classes,
    ...(inputComponent ? { inputComponent: inputComponent } : {}),
    ...(endAdornment ? { endAdornment: endAdornment } : {}),
  }

console.log(myInputPropsObject)

Note: destruction of an empty object will cause the Uncaught SyntaxError: Invalid or unexpected token issue.

to check it:

const myObject = {
  name: 'testName',
  ...{},
}