Provide a way to set properties on the native input element rendered by TextField

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Properties passed per inputProps to a TextField should add properties to the native input element.

Current Behavior

The native input element get an attribute instead of an property.

Steps to Reproduce (for bugs)

Example Link on CodeSandbox

1. create a TextField
2. pass properties to inputProps
3. inspect the rendered native input element

Context

I have to use a third-party-library and wanted to save an object on the native input element, which contains further information about the input field (why it is rendered and how it should be validated)

Your Environment

Dependencies from package.json:

"dependencies": {
    "axios": "^0.17.1",
    "bootstrap": "4.0.0-beta.2",
    "jquery": "^3.2.1",
    "material-ui": "1.0.0-beta.44",
    "moment": "^2.22.1",
    "prop-types": "^15.6.1",
    "react": "^16.1.1",
    "react-dom": "^16.1.1",
    "react-select": "^1.2.1",
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-add-module-exports": "^0.2.1",
    "babel-plugin-transform-es2015-destructuring": "^6.23.0",
    "babel-plugin-transform-es2015-modules-umd": "^6.24.1",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.4"
  },

Tested in Chrome.

---

the naming of inputProps is highly missleading, because it is just rendering attributes and not properties as the naming says.

[adeelibr]

Sorry for the late response, I was busy with my office work. I read the thread and made a small PR as suggested. Is this how I was suppose to do it https://github.com/mui-org/material-ui/pull/11694 @oliviertassinari

[uvtzxpm]

the naming of inputProps is highly missleading, because it is just rendering attributes and not properties as the naming says.

It’s not really misleading, because in the React world you pass props to components. The difference between native JavaScript properties vs attributes generally doesn’t matter when you’re using React. It’s too low level, unless you’re doing something weird like using a third-party jQuery (etc.) library.

It’s jQuery’s .prop() vs .attr() all over again.

I don’t think anything should happen here. Maybe a note in the documentation somewhere explaining it a bit and providing this as an example:

<TextField inputRef={(elem) => { elem.myData = { foo: 'bar' }; }} />