Material-ui: Missing onEnter prop callback for TextField component

Created on 25 Jan 2017  路  6Comments  路  Source: mui-org/material-ui

I could not find the prop for the onEnter callback on TextField.

Reference, pull request from 2015: https://github.com/callemall/material-ui/pull/328

Versions

Material-UI: v0.16.7
React: 15.4.1
Browser: Chrome 55.0.2883.95

wontfix

Most helpful comment

use React synthetic events

handleTextFieldKeyDown = event => {
    switch (event.key) {
        case 'Enter':
            // call corresponding handler
            break
        case 'Escape':
            // etc...
            break
        default: break
    }
}
...
<TextField onKeyDown={this.handleTextFieldKeyDown} />

All 6 comments

use React synthetic events

handleTextFieldKeyDown = event => {
    switch (event.key) {
        case 'Enter':
            // call corresponding handler
            break
        case 'Escape':
            // etc...
            break
        default: break
    }
}
...
<TextField onKeyDown={this.handleTextFieldKeyDown} />

@Sharlaan Thank you for the reply.

Maybe I am missing something, but I can't see this prop either - https://github.com/callemall/material-ui/blob/ccf712c5733508784cd709c18c29059542d6aad1/src/TextField/TextField.js

Or did you mean to use this event independently of material-ui?

Yes, synthetic events are props you can attach to any React component.

Your issue is independent of Material-UI.

Ok. This is fine and it works very well. Thanks!

But I still find it a bit strange that the pull request is accepted but those changes are nowhere to be found.

If you want an event to be fired up on a click on the TextField, you can use the onClick prop.
If you want to fire an event when you type something, you can use the onChange prop.
As far as the keyboard enter is concerned, you can use onFocus prop to have the onEnter functionality. But I see that PR merged but those commits were taken out for some reason. I will make a PR for onKeyDown prop as this prop is still different from all the props I mentioned above.

The onEnter property was removed from the TextField component as we think that it shouldn't be his responsibility.
I'm fine providing a Higher-order Component that adds this feature, but I don't think that we should bloat the <TextField /> component with it. The closer the API is from a native <input />, the better.
I'm closing #6195.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ghost picture ghost  路  3Comments

mb-copart picture mb-copart  路  3Comments

ryanflorence picture ryanflorence  路  3Comments

chris-hinds picture chris-hinds  路  3Comments

rbozan picture rbozan  路  3Comments