Attached form button doesn't trigger form submit when clicked

Question

Consider following example:

import React, { Component } from 'react'
import { Form } from 'semantic-ui-react'

class FormExample extends Component {
  state = {}

  handleChange = (e, { name, value }) => this.setState({ [name]: value })

  handleSubmit = () => this.setState({ email: '', name: '' })

  render() {
    const { name, email } = this.state

    return (
      <Form onSubmit={this.handleSubmit}>
        <Form.Group>
          <Form.Input placeholder='Name' name='name' value={name} onChange={this.handleChange} />
          <Form.Input placeholder='Email' name='email' value={email} onChange={this.handleChange} />
          <Form.Button attached='bottom' content='Submit' />
        </Form.Group>
      </Form>
    )
  }
}

When Form.Button is attached clicking it does not leads to form submission. When attached property is omitted onSubmit handler works as expected.

Is it expected behaviour or should I file a bug issue on GitHub?

Answer 1

please add type="submit" to your submit button

<Form.Group>
    <Form.Input placeholder='Name' name='name' value={name} onChange={this.handleChange} />
     <Form.Input placeholder='Email' name='email' value={email} onChange={this.handleChange} />
     <Button type='submit'>Submit</Button>
 </Form.Group>

Answer 2

Form.Button don't have attached as prop .

By adding this prop , your button tag is getting converted to div tag. By adding type="submit" also don't work with this prop because after all it is div only. And to submit a form we need only button tag.

Better to not use this attached prop in Form .

You can only have this,

<Form.Button content='Submit' />

or you can use Button tag with type="submit"

import {Button} from 'semantic-ui-react'

<Button type="submit">Submit</Button>

Answer 3

Form.Button does not have attached as a property.

You can only use content = 'Submit' and the attached property won't work.

So this is the right code:

<Form.Button content='Submit' />

Or if you want new property:

import { Form, Button } from 'semantic-ui-react'


<Button type="submit">Submit</Button>

So if you want to import Button , you can use it and do the type="Submit" property and then inside add Submit as the text and then end the Button .

In conclusion, you cannot have attached inside so you have to remove it for it to work.

Answer 4

Just try inside your form

<Button>Submit</Button>

as in html, button inside form triggers the form submit event by default.