React-jsonschema-form: Custom component onChange saving the entire form.

[ebower12]

Prerequisites

• [x] I have read the documentation;
• [ ] In the case of a bug report, I understand that providing a SSCCE example is tremendously useful to the maintainers.

Description

I've created a custom component for one of my forms and I'm passing it in through the uiSchema like this

uiSchema = {
        environments: {
          'ui:widget': formData => <CustomEnvironmentsComponent value={formData.value} options={formData.options.enumOptions} />,
        },
      }

and here is the custom component itself

import React from 'react'
import PropTypes from 'prop-types'
import { Button } from 'semantic-ui-react'

export default class CustomEnvironmentsComponent extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      activeOptions: this.props.value,
    }
  }

  render() {
    const { options } = this.props
    const { activeOptions } = this.state
    return (
      <div>
          <Button.Group basic>
            {options.map(option => (
              <Button
                key={option.label}
                active={activeOptions.includes(option.value)}
                onClick={(e, data) => {
                  const newValue = data.active ? activeOptions.filter(x => x !== option.value) : [...activeOptions, option.value]
                  this.setState({ activeOptions: newValue })
                }}
              >
                {option.label}
              </Button>
            ))}
          </Button.Group>
      </div>
    )
  }
}

CustomEnvironmentsComponent.propTypes = {
  options: PropTypes.array.isRequired,
  value: PropTypes.array.isRequired,
}

I have my parent component set up to dispatch an ajax call when the onSubmit prop of the JSON schema form is called. This is only triggered when the submit button is clicked. My custom component is using local state for it's data handling and isn't even calling the onChange prop as described in the custom widget section of the documentation.

For some reason changing the value of my custom component is triggering the onSubmit prop of the form and dispatching the ajax call, instead of just updating the UI until the submit button is clicked. I think this is related to another issue I'm having where the form seems to be caching an older version of the data and reverting back to it when the form is re-rendering. I feel like if I can get the custom component to stop triggering the onSubmit it will hopefully fix the other issue as well.

Expected behavior

• I render my form
• I change the data on my custom widget
• the UI reflects the change, but does not dispatch an ajax call or save the change until the submit button is clicked.

Actual behavior

• I render my form
• I change the data on my custom widget
• the onSubmit prop of the form is called, dispatching an ajax call and saving the entire form.

Version

1.0.4

[glasserc]

I'm having a hard time reproducing this. The custom widget in the playground doesn't seem to cause the form to submit, even when its state changes. Can you provide a minimal test case that reproduces it?

[LucyR]

I had similar problem, need to add preventDefault to avoid submitting form
onClick={(e, data) => {
e.preventDefault()
const newValue = data.active ? activeOptions.filter(x => x !== option.value) : [...activeOptions, option.value]
this.setState({ activeOptions: newValue })
}}

[epicfaace]

It seems that this is happening because you need to have the attribute <button type="button"> in a form -- otherwise, clicking on the button will submit a form. So, either adding the type attribute, or using e.preventDefault() as @LucyR mentioned, should fix it.

See this for more information: https://stackoverflow.com/questions/41904199/whats-the-point-of-button-type-button