Possible bug with mixed checkbox and radio groups in the doc examples

[metaturso]

Describe the bug

On the official example Vue Formulate for "Ignored Inputs", when using a dropdown with the ignored attribute to switch between a checkbox and a radio group, the form state becomes mangled and no longer representative of what the user sees.

I have noticed three possible failure modes that I'll explain below, only two of which I could easily replicate. This may well be idiosyncratic behavior proper of this library but it seemed broken enough that I decided to file a bug anyway. I apologize if this is expected behavior, please do not hesitate to dismiss this as a bogus report.

Here's some quick aspects that immediately stood out when playing with this particular Vue Formulate example:

• The form state includes values from both groups, in this case sauce and burger. I guess this could be considered OK in some contexts, and easily worked around with custom logic to clear the state whenever the meal type is changed.
• The state of a radio group is treated as a multiple choice control, e.g. every time a different radio is selected an extra option is added to the sauce array. If the sauce field was a string, it becomes an array.
• The state of a checkbox group is treated as an exclusive choice control, e.g. every time a different checkbox is ticked entire value of the burger changes. If the burger field was an array, it becomes a string.
• Very rarely, the type of both sauce and burger changed to array. Once all options had been accumulated, they never changed again.
• The form UI state is does not actually represent the form state, e.g. options present in the form state aren't checked on the GUI.

To Reproduce Steps to reproduce the behavior:

1. Go to https://vueformulate.com/guide/forms/#ignoring-inputs
2. Select Pasta meal from the dropdown
3. Click on Tortellini, then Carbonara
4. Select Hamburger meal from the dropdown
5. Tick all options
6. Select Pasta meal from the dropdown
7. Click Bolognese
8. Repeat ad lib until the form state is completely mangled

Very soon you'll notice that the form state presented in the JSON output becomes completely detached from the what's being presented on the form GUI.

Expected behavior I'm not sure how this library should work by default, I suppose it make sense to keep both sauce and burger options, because (in the example) there is no logic to clear either value when the dropdown changes.

Nevertheless, I expect the following statements to always remain true:

• the field backing an exclusive choice control should always remain a string type, not change to array.
• the field backing the multiple choice control should always remain an array, not change to string.
• the GUI always be representative of the form state and the two to never run out of sync.

Screenshots

burger state is broken and no longer accumulates values. The GUI is out of sync.

burger state becomes a singleton, multiple choices no longer work.

Unfortunately, I've started recording after triggering the worst case scenario, where both fields became arrays of burger options with all options selected, and the GUI showed none of the radio/check boxes as selected. Here's a screenshot I took before refreshing the page for a repro video:

Here's another screenshot of an invalid state generated simply by switching fields and checked values:

1. Click Hamburger
2. Click Pasta without building any of the burger
3. Select Sauce

Device information:

• Windows 10.
• Firefox Developer 93.0b8 (64-bit).

PS: The real bug here is that Tortellini is not a pasta sauce ;)

[justin-schroeder]

Great bug report @metaturso at first glance im not entirely sure what is going on here — this example definitely did work at one point and there are lots of backing tests for this relatively basic behavior. I'll do more digging but either way I appreciate the quality report 👍