Enter key form submit not working when Link is present

Question

I am unable to submit form on enter key press

<Form onSubmit={this.handleFormSubmit}>

    <Link to="/back"><Button> Back</Button></Link> // back button

    <FormGroup>
        <Label htmlFor="name">Name</Label>
        <Input name="name" type="text"/>
    </FormGroup>

    <Button type="submit"><i className="fa fa-dot-circle-o"></i> Submit</Button>
    <Button type="reset" onClick={this.HandleReset}><i className="fa fa-ban"></i> Reset</Button>

</Form>

Enter key must trigger this function

handleFormSubmit = event => {
    event.preventDefault();
    // more core here
}

When i press enter key the back button in the form with the link is executing.

When i comment the back button it is working properly i.e form is getting submitted (and i can control it using preventDefault()).

How can i use form onSubmit while link is present in the form ?

Answer 1

Why not just take the Link outside the Form component? The Link doesn't provide any value or meet any requirements for the form in a purely functional perspective. The Form is meant to gather input from the user. The Link is merely a back button, let it be a back button.

For aesthetic purposes, the differences are negligible.

  <div>
    <Link to="/back"><Button> Back</Button></Link> // back button
    <Form onSubmit={this.handleFormSubmit}>
        <FormGroup>
            <Label htmlFor="name">Name</Label>
            <Input name="name" type="text"/>
        </FormGroup>

        <Button type="submit"><i className="fa fa-dot-circle-o"></i> Submit</Button>
        <Button type="reset" onClick={this.HandleReset}><i className="fa fa-ban"></i> Reset</Button>
    </Form>
  </div>

Because when you define a button in a form, it implicitly has a type of "submit". Since you have a button in your Link, and it is the first button in the form, your form decides that this is the button that will execute on form submission. Thus ignoring your actual submit button on the bottom.

You can workaround this by giving the button in the Link tag a type of "button" as you suggested. Thus the form will travel further down to find another button.

<Form onSubmit={this.handleFormSubmit}>
    <Link to="/back"><Button type="button"> Back</Button></Link> // back button
    <FormGroup>
        <Label htmlFor="name">Name</Label>
        <Input name="name" type="text"/>
    </FormGroup>
    <Button type="submit"><i className="fa fa-dot-circle-o"></i> Submit</Button>
    <Button type="reset" onClick={this.HandleReset}><i className="fa fa-ban"></i> Reset</Button>
</Form>