Material-ui: TextField detect enter (or other) key

[BlockChange]

Before there used to be an onEnter available if I remember correctly, but it got removed. However, I don't know how to detect an enter event now, because if I press enter, the onChange is not fired...

I must be missing something, but in the docs I don't see any other method to use to detect if enter was pressed...

• Material-UI: 0.16.0
• React: 15.3.2
• Browser: Chrome

[oliviertassinari]

Just some though. How would you solve this issue with an <input />? I believe that you would solve the issue exactly the same way.
That's why this callback was removed from the component. It's not related to the material design specification.
I don't think that it's an issue but a question. I'm closing. Have a look into the onKeyDown and onKeyUp callbacks.

[valoricDe]

I think it's weird to say it's not related to material design. It's an essential part of interaction with the textfield component and that's the main point of material, to make it easy to have a good user interaction. Why didn't you also remove onChange and onKeyDown then? @BlockChange I solved it previously with an <form onSubmit={this.submitAddSectionDialog}> wrapped around my textfields and <TextField ref={ (c) => { this.textField = c } } ... />

[oliviertassinari]

Why didn't you also remove onChange and onKeyDown then?

That would prevent users from implementing this logic on their side.

I believe that we should aim for a TextField as close as possible to a native input.
I don't want to make everybody pay with an onEnter callback in the core of the component.
That would be much better to have an HoC providing this functionality.
A functionality that would help any style implementation. Hence, I'm not sure that we should have one here. Still, that's something to consider.

[valoricDe]

The problem right know is that every developer is left alone with this problem. It would be really cool if there would be FAQ with code snippets for such things or a registry specially for material-ui for developers which developed such HoC's already. So they can share these ones with us. Regarding the native input: A native input has an on enter function. When the enter key is hit the form will be sent. But in React it seems uncommon to place forms around input fields. So there needs to be an easy mechanism for developers to implement on enter behaviour because it such a "core" user interaction.

[oliviertassinari]

A native input has an on enter function.

I can't make is work. Any idea http://www.webpackbin.com/N1SoP8i1G?

But in React it seems uncommon to place forms around input fields.

React allow you to more or less get away without using it. But I still think that it's a best practice to use it.

if there would be FAQ with code snippets for such things or a registry specially for material-ui for developers which developed such HoC's already.

I agree, but I'm not aware of any project addressing this issue.

[SuEric]

Hey guys;
Doing:

<TextField
  onKeyPress={(ev) => {
    console.log(`Pressed keyCode ${ev.key}`);
    if (ev.key === 'Enter') {
      // Do code here
      ev.preventDefault();
    }
  }}
/>

Worked for me.

Note the ev.preventDefault() so you don't get a onSubmit call.
Also ev.keyCode doens't work, always log 0, I think is a chrome bug after Googling about it, not sure tho. So I used ev.key instead

Cheers!

[AdityaAnand1]

I would love a less verbose alternative to @SuEric's solution. Would it be feasibly to turn this into an onEnter callback?

[Zvax]

@AdityaAnand1 This is like, five lines of code, using the super non-verbose arrow functions...

Also, what about other keys, we'd have an onLetterD, onEsc and onLeftParens? I'm all for laziness, but there are limits ;)

If it's the number of arguments for the TextField that bother you, it's always possible to implement the method as a class member, and use onKeyPress={this.onKeyPress}. Which would also be better, as it would not force a redefinition of the lambda on each rendering cycle.

<TextField
  fullWidth
  id="some-id"
  onChange={this.handle}
  onKeyPress={this.catchReturn}
  value={this.props.value} />

[mbrookes]

@Zvax has summed it up nicely, so to save further debate, I'm going to lock this issue.