Material-ui: [RaisedButton] doesn't respond to enterKey

[dcsan]

I have a button in a form that the user can tab to select.
however hitting "enter" while the button is selected doesn't trigger any event in that button - have to reach manually and use the mouse to click it.

onMouseDown does work

button markup:

            <RaisedButton
              label='send'
              onMouseDown={that.enterInput}
              onEnterKeyDown={that.enterInput}
            />

[mbrookes]

Reproducible with the docs site. Thanks for your report - PRs are always welcome!

Actually I was testing with the "Choose an Image" button, which whilst it does have the same symptoms, isn't the same problem.

@tintin1343 has taken a look and the callback method is working fine...

[tintin1343]

@dcsan : Could you give us a bit more information about the issue.

I tried reproducing the issue using the below example:

And it works fine for me. Were your RaisedButton and other components embedded within a <form> tag?

Do let me know.

[sheki]

This does not work. If you press enter in the above example it submits the form, it does not perform the onClick function.

[sheki]

@tintin1343 side note, I could have tried the code you mentioned above, if it was in code and not image. :)

[tintin1343]

@sheki : Sorry about that. I can post the code for you.

[alphasp]

You need to add type="submit" on RaisedButton component

[tintin1343]

@dcsan @sheki : where you guys able to fix this using type="submit" ? If you have let me know.

[tintin1343]

I am closing this for now. if you still have the issue do let me know by leaving a comment below. I will reopen the issue.

[Lavioli]

I am having the same issue as well.

<RaisedButton
                                label={ buttonName }
                                labelPosition="before"
                                containerElement="label"
                                className="hide show"
                                ref={ "refButton" }
                                tabIndex={1}
                                onClick={ onSubmitMethod }
                                onSubmit={ onSubmitMethod }
                                type="Submit"
                                autoFocus={ true }
                            />

tried it with autoFocus to see if enter might work but it doesn't :/

[mbrookes]

onClick={ onSubmitMethod }

ontouchTap?

[Lavioli]

@mbrookes I tried that, it doesnt work.

I had no choice but to put an input tag inside the RaisedButton to allow autoFocus... Any other suggestions on how I can avoid doing this way?

<RaisedButton
    label={ buttonName }
    labelPosition="before"
     containerElement="label"
    className="hide show"
    ref={ "refButton" }
    onClick={ onSubmitMethod }
>
 { ( this.props.showNextQuestionButton === true ) ?  <input autoFocus id="next-button" type="button" required />
</RaisedButton>

[mbrookes]

I tried that, it doesnt work.

http://www.material-ui.com/#/get-started/installation ?

[dulik06]

I have the same issue for LogIn / Register buttons. Did anyone get a fix?

[morenoh149]

@tintin1343 please reopen. I have

    <RaisedButton
                  label="Submit"
                  onMouseDown={this.foo.bind(this, fooForm)}
                  onSubmit={this.foo.bind(this, fooForm)}
                  type="submit"
                />

this also seems to trigger a page refresh which is the default browser behavior when a form is submitted.

[psono]

Just for the general "wisdom" :) You have to put your <button> (or <RaisedButton>) inside of a <form> tag, otherwise it wont respond to enter.