{"action":"created","issue":{"url":"https://api.github.com/repos/andyhu92/react-bootstrap4-form-validation/issues/4","repository_url":"https://api.github.com/repos/andyhu92/react-bootstrap4-form-validation","labels_url":"https://api.github.com/repos/andyhu92/react-bootstrap4-form-validation/issues/4/labels{/name}","comments_url":"https://api.github.com/repos/andyhu92/react-bootstrap4-form-validation/issues/4/comments","events_url":"https://api.github.com/repos/andyhu92/react-bootstrap4-form-validation/issues/4/events","html_url":"https://github.com/andyhu92/react-bootstrap4-form-validation/issues/4","id":344576638,"node_id":"MDU6SXNzdWUzNDQ1NzY2Mzg=","number":4,"title":"How works form submitting?","user":{"login":"Valeriy1991","id":6594815,"node_id":"MDQ6VXNlcjY1OTQ4MTU=","avatar_url":"https://avatars3.githubusercontent.com/u/6594815?v=4","gravatar_id":"","url":"https://api.github.com/users/Valeriy1991","html_url":"https://github.com/Valeriy1991","followers_url":"https://api.github.com/users/Valeriy1991/followers","following_url":"https://api.github.com/users/Valeriy1991/following{/other_user}","gists_url":"https://api.github.com/users/Valeriy1991/gists{/gist_id}","starred_url":"https://api.github.com/users/Valeriy1991/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Valeriy1991/subscriptions","organizations_url":"https://api.github.com/users/Valeriy1991/orgs","repos_url":"https://api.github.com/users/Valeriy1991/repos","events_url":"https://api.github.com/users/Valeriy1991/events{/privacy}","received_events_url":"https://api.github.com/users/Valeriy1991/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-07-25T19:30:28Z","updated_at":"2018-07-26T01:12:30Z","closed_at":null,"author_association":"NONE","body":"Hi!\r\n\r\nI have parent component `IncomeOperationItem`:\r\n```js\r\nimport React, { Component } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { connect } from 'react-redux'\r\nimport { Row, Col, Form, FormGroup, Label, Input, FormText, Button, Card, CardBody } from 'reactstrap'\r\nimport { ValidationForm, TextInput, SelectGroup, Checkbox, Radio } from 'react-bootstrap4-form-validation'\r\n\r\nimport AddCopyOperationButton from 'components/Operations/OperationActions/AddCopyOperationButton';\r\nimport RemoveOperationButton from 'components/Operations/OperationActions/RemoveOperationButton';\r\nimport RemoveSelectedOperation from 'components/Operations/NewOperations/RemoveSelectedOperation';\r\nimport { IncomeOperationPropTypes } from 'constants/propTypes/operations';\r\nimport {\r\n    changeIncomeOperationAmount, changeIncomeOperationPurse, changeIncomeOperationIncomeItem, changeIncomeOperationTags\r\n} from 'actions/operations';\r\nimport {\r\n    createNewTag\r\n} from 'actions/handbooks';\r\nimport { PursePropTypes, IncomeItemPropTypes, TagPropTypes } from 'constants/propTypes/handbooks';\r\nimport TagsAutocompleteInput from 'components/Operations/NewOperations/base/TagsAutocompleteInput';\r\nimport * as arrayUtils from 'utils/arrayUtils';\r\nimport IncomeItemsSelector from 'components/Operations/NewOperations/base/IncomeItemsSelector';\r\nimport PursesSelector from 'components/Operations/NewOperations/base/PursesSelector';\r\nimport OperationAmountInput from 'components/Operations/NewOperations/base/OperationAmountInput';\r\nimport OperationTagsInput from 'components/Operations/NewOperations/base/OperationTagsInput';\r\nimport { findNewTags } from 'utils/tagsUtils';\r\n\r\nclass IncomeOperationItem extends Component {\r\n    constructor(props) {\r\n        super(props);\r\n    }\r\n\r\n    addCopyOfBlock = () => {\r\n        const { incomeOperation, addCopyOfBlock } = this.props\r\n        addCopyOfBlock(incomeOperation.number)\r\n    }\r\n    removeBlock = (number) => {\r\n        const { removeBlock } = this.props\r\n        removeBlock(number)\r\n    }\r\n\r\n    handleChangeAmount = (newAmount) => {\r\n        const { changeIncomeOperationAmount, incomeOperation } = this.props\r\n        changeIncomeOperationAmount(incomeOperation.number, newAmount)\r\n    }\r\n    handleChangeSelectedPurse = (selectedPurse) => {\r\n        const { changeIncomeOperationPurse, incomeOperation } = this.props\r\n        changeIncomeOperationPurse(incomeOperation.number, selectedPurse)\r\n    }\r\n    handleChangeSelectedIncomeItem = (selectedIncomeItem) => {\r\n        const { changeIncomeOperationIncomeItem, incomeOperation } = this.props\r\n        changeIncomeOperationIncomeItem(incomeOperation.number, selectedIncomeItem)\r\n    }\r\n    handleChangeSelectedTags = (selectedTags) => {\r\n        const { tags, changeIncomeOperationTags, incomeOperation } = this.props\r\n        changeIncomeOperationTags(incomeOperation.number, selectedTags)\r\n        if (selectedTags) {\r\n            findNewTags(selectedTags, tags, this.handleCreateNewTag)\r\n        }\r\n    }\r\n    handleCreateNewTag = (newTags) => {\r\n        console.log('New tags: ', newTags)\r\n        const { createNewTag } = this.props\r\n\r\n        if (newTags) {\r\n            createNewTag(newTags)\r\n        }\r\n    }\r\n    handleSubmitForm = (e, formData, inputs) => {\r\n        e.preventDefault()\r\n\r\n        console.log(e, formData, inputs)\r\n    }\r\n    handleErrors = (e, formData, errorInputs) => {\r\n        console.log('handleErrors: ', e, formData, errorInputs)\r\n    }\r\n\r\n    render() {\r\n        const { incomeOperation, isRemoveButtonEnabled, tags, incomeItems, purses } = this.props\r\n\r\n        const removeButton = isRemoveButtonEnabled\r\n            ? <RemoveSelectedOperation number={incomeOperation.number} onRemove={this.removeBlock} />\r\n            : null\r\n\r\n        const elementIdSuffix = incomeOperation.number\r\n        const purseSelectId = `purseSelect${elementIdSuffix}`\r\n        const plusInputId = `plus${elementIdSuffix}`\r\n        const incomeItemSelectId = `incomeItemSelect${elementIdSuffix}`\r\n        const tagsInputId = `tags${elementIdSuffix}`\r\n\r\n        const isHighlightedForRemoveClass = incomeOperation.isHighlightedForRemove\r\n            ? 'operation-details-item--for-remove'\r\n            : ''\r\n\r\n        return (\r\n            <li className={`list-group-item list-group-item-light operation-details-item ${isHighlightedForRemoveClass}`}>\r\n                <ValidationForm onSubmit={this.handleSubmitForm}\r\n                    onErrorSubmit={this.handleErrors}\r\n                    immediate={true}\r\n                    setFocusOnError={true}\r\n                >\r\n                    <FormGroup row>\r\n                        <Col sm={5}>\r\n                            <PursesSelector id={purseSelectId}\r\n                                selectedPurse={incomeOperation.purse}\r\n                                purses={purses}\r\n                                onChange={this.handleChangeSelectedPurse} />\r\n                        </Col>\r\n                        <Col sm={6}>\r\n                            <Label for={plusInputId} hidden>Укажите сумму операции</Label>\r\n                            <OperationAmountInput id={plusInputId}\r\n                                selectedValue={incomeOperation.plus}\r\n                                onChange={this.handleChangeAmount}\r\n                            />\r\n                        </Col>\r\n                        <Col sm={1} className='text-right'>\r\n                            <AddCopyOperationButton number={incomeOperation.number} onClick={this.addCopyOfBlock} />\r\n                        </Col>\r\n                    </FormGroup>\r\n                    <FormGroup row>\r\n                        <Col sm={5}>\r\n                            <IncomeItemsSelector id={incomeItemSelectId}\r\n                                selectedIncomeItem={incomeOperation.incomeItem}\r\n                                incomeItems={incomeItems}\r\n                                onChange={this.handleChangeSelectedIncomeItem}\r\n                            />\r\n                        </Col>\r\n                        <Col sm={6}>\r\n                            <OperationTagsInput id={tagsInputId}\r\n                                selectedTags={incomeOperation.tags}\r\n                                tags={tags}\r\n                                onChange={this.handleChangeSelectedTags}\r\n                                onCreateNewTag={this.handleCreateNewTag}\r\n                            />\r\n                        </Col>\r\n                        <Col sm={1} className='text-right'>\r\n                            {removeButton}\r\n                            {/* <button className=\"btn btn-primary\">Submit</button> */}\r\n                        </Col>\r\n                    </FormGroup>\r\n                </ValidationForm>\r\n            </li>\r\n        );\r\n    }\r\n}\r\n\r\nIncomeOperationItem.propTypes = {\r\n    incomeOperation: IncomeOperationPropTypes,\r\n    isRemoveButtonEnabled: PropTypes.bool,\r\n    tags: PropTypes.arrayOf(TagPropTypes),\r\n    purses: PropTypes.arrayOf(PursePropTypes),\r\n    incomeItems: PropTypes.arrayOf(IncomeItemPropTypes),\r\n\r\n    addCopyOfBlock: PropTypes.func,\r\n    removeBlock: PropTypes.func,\r\n};\r\n\r\nexport default connect(\r\n    null,\r\n    {\r\n        changeIncomeOperationAmount, changeIncomeOperationPurse, changeIncomeOperationIncomeItem, changeIncomeOperationTags,\r\n        createNewTag\r\n    }\r\n)(IncomeOperationItem);\r\n```\r\nIt looks like this:\r\n![image](https://user-images.githubusercontent.com/6594815/43222609-465b079c-9059-11e8-9ad5-41a6ed129b73.png)\r\nI'm not understand how can I submit form inside my block? On each block I have 2 buttons:\r\n* add copy of current block button\r\n* remove current block button\r\nAfter last block I have one big button for add new empty block.\r\n\r\nWhen I click on my any button `ValidationForm` does not throw `handleSubmit` event. But if I add instead of my \"remove button\" this code:\r\n```js\r\n<button className=\"btn btn-primary\">Submit</button>\r\n```\r\nand it's looks like this:\r\n![image](https://user-images.githubusercontent.com/6594815/43222985-47d03100-905a-11e8-81a0-eaa8c45e6ffd.png)\r\n\r\nthe `ValidationForm` raise `handleSubmit` event! How? :)"},"comment":{"url":"https://api.github.com/repos/andyhu92/react-bootstrap4-form-validation/issues/comments/407944481","html_url":"https://github.com/andyhu92/react-bootstrap4-form-validation/issues/4#issuecomment-407944481","issue_url":"https://api.github.com/repos/andyhu92/react-bootstrap4-form-validation/issues/4","id":407944481,"node_id":"MDEyOklzc3VlQ29tbWVudDQwNzk0NDQ4MQ==","user":{"login":"andyhu92","id":12177664,"node_id":"MDQ6VXNlcjEyMTc3NjY0","avatar_url":"https://avatars3.githubusercontent.com/u/12177664?v=4","gravatar_id":"","url":"https://api.github.com/users/andyhu92","html_url":"https://github.com/andyhu92","followers_url":"https://api.github.com/users/andyhu92/followers","following_url":"https://api.github.com/users/andyhu92/following{/other_user}","gists_url":"https://api.github.com/users/andyhu92/gists{/gist_id}","starred_url":"https://api.github.com/users/andyhu92/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/andyhu92/subscriptions","organizations_url":"https://api.github.com/users/andyhu92/orgs","repos_url":"https://api.github.com/users/andyhu92/repos","events_url":"https://api.github.com/users/andyhu92/events{/privacy}","received_events_url":"https://api.github.com/users/andyhu92/received_events","type":"User","site_admin":false},"created_at":"2018-07-26T01:12:30Z","updated_at":"2018-07-26T01:12:30Z","author_association":"OWNER","body":"According to [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button), the default `type` attribute of `button` is `submit`, so that's why if you use `<button className=\"btn btn-primary\">Submit</button>`, it will raise the `submit` event and trigger the `handleSubmit`. So I assume your other buttons are all have `type='button'`, because you don't want to submit the form when your user click add copy or remove current block button or add new empty block button right? Hope this will explain the issue :)"}}
{"actor":{"display_login":"andyhu92"}}