Form error state persists as empty input changes from required to optional

I recently created a form containing a dropdown input field with a few selection options. The last option in the list is “Other”. When this option is selected, we display a text input field and also require it with form submission. I noticed while testing that changing the dropdown selection to a non-required value, the form persists a required error. See below.

[— Setup —]

Create a form with two inputs.

  • A dropdown input asking for favorite type of pancakes: Plain, Blueberry, and Other.
  • A conditionally required text field, only required when pancake dropdown selection is “Other”.

[— Steps to reproduce error —]

  1. Select “Other” for the pancake dropdown.
  2. Click in and out of text field (no data entry).
  3. Select “Blueberry” for the pancake dropdown.
  4. Submit form.

Expected: Form submits successfully.
Actual: Form submission fails. Error message = “Some form inputs are invalid!”

Hey there @kylewhitaker! Thanks for the post and the detailed walkthrough. I was indeed able to reproduce this on my end (with the correct pancake options, by the way):

Screen Shot 2020-11-04 at 11.13.24 AM

Looks like this is a bug on our end. I verified that after switching the top dropdown away from “other”, the “required” field for the text input correctly evaluates to false, but for some reason the parent form still things it’s required.

Screen Shot 2020-11-04 at 11.17.57 AM

I’ll file this with the engineering team and notify you / the thread when it’s fixed!

1 Like

Hey @kylewhitaker!

Thank you for sharing this + thank you for such a detailed post — it definitely made our jobs easier :grin: This has been fixed! It looks like we were not properly resetting our form validation when we conditionally changed our required status.

Let us know if you’re still having any problems here + thanks again!

1 Like