Material-ui: Provide a way to set properties on the native input element rendered by TextField

[NonPolynomial]

• [x] 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.

[oliviertassinari]

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)

@NonPolynomial I don't understand. How would you do that with a native React element? How is this issue specific to Material-UI?

[NonPolynomial]

@oliviertassinari
With a native React element I would use

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

I currently use a workaround and save my data with the usage of inputRef.

---

How I said, the naming / API is missleading.
The API says the following:

Name | Type | Default  | Description
-- | -- | -- | --
inputProps | object |   | Properties applied to the native input element.

I'm currently not sure if this is a bug report or a feature request.
The description says inputProps would apply properties, but just applies attributes.

If this is not a bug and is intentionally implemented that way, than the documentation has to be updated to clearify the behavior.

[oliviertassinari]

If this is not a bug and is intentionally implemented that way, than the documentation has to be updated to clearify the behavior.

@NonPolynomial Updating the documentation to use the "attribute" wording intead of "property" sounds good to me 👍.

Going back to your problem, you can do:

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

[NonPolynomial]

hey @oliviertassinari ,

I already use inputRef :D

Maybe, there should be a notice about the difference between properties and attributes.
Something like

If you want to use properties instead, use inputRef instead.

If you wish, I could do the changes and make a PR.

I can provide a list of occurences where inputProps occur with the context of native input elements, if someone is faster than me

I did a list of occurences for inputProps with the context of native input elements:

• pages/api/text-field.md
• pages/api/select.md
• pages/api/checkbox.md
• pages/api/radio.md
• pages/api/switch.md
• pages/api/input.md

[ninjasun]

Hey @NonPolynomial are you doing this?

[adeelibr]

Is anyone working on this?

[adeelibr]

@oliviertassinari can I work on this?

[NonPolynomial]

@adeelibr Got a lot to work last weeks, so i couldn't do it myself.
Feel free to do it.

[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' }; }} />

[oliviertassinari]

@uvtzxpm It's a fair point. I'm happy either way.

[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

[NonPolynomial]

@uvtzxpm normally you would be right, but the documentation as it is, says Properties applied to the native input element..
Your argument about React elements is right, but the documentation is talking about the native input element and not a React element representing an input.