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>