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
Material-UI: v0.16.7
React: 15.4.1
Browser: Chrome 55.0.2883.95
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.
Most helpful comment
use React synthetic events