Bug - Fieldflow breaks on changes with appended checkbox component

[jeffwylarsen]

Describe the bug

Fieldflow stops working after the initial submission when appending a component rendered as checkboxes.

To Reproduce

Steps to reproduce the behavior:

1. Create a fieldflow element with the first action as a select element
2. In the actions for the first element, append a second fieldflow element rendered as a checkbox
3. Submit the form
4. Change the value of the first select element
5. Submit the form again

Example

<div class="wb-fieldflow" data-wb-fieldflow='{"default": {"action": "toggle", "toggle": {"selector": "#content1", "type": "on"}}}'>
    <p>First question</p>
    <ul>
        <li data-wb-fieldflow='{"action": "append", "source": "#checkboxes", "renderas": "checkbox", "isoptional": true}'>Option 1</li>
        <li data-wb-fieldflow='{"action": "append", "source": "#checkboxes", "renderas": "checkbox", "isoptional": true}'>Option 2</li>
    </ul>

    <div id="checkboxes" class="hidden">
        <p>Select additional criteria</p>
        <ul>
            <li data-wb-fieldflow='{"action": "toggle", "toggle": {"selector": "#content2", "type": "on"}}'>Criteria 1</li>
            <li data-wb-fieldflow='{"action": "toggle", "toggle": {"selector": "#content2", "type": "on"}}'>Criteria 2</li>
            <li data-wb-fieldflow='{"action": "toggle", "toggle": {"selector": "#content2", "type": "on"}}'>Criteria 3</li>
            <li data-wb-fieldflow='{"action": "toggle", "toggle": {"selector": "#content2", "type": "on"}}'>Criteria 4</li>
        </ul>
    </div>
</div>

<div id="content1" class="hidden">
    <p>test 1</p>
</div>
<div id="content2" class="hidden">
    <p>test 2</p>
</div>

Current behavior

After initial submission, change the first value and submit again. The fieldflow script throws an error, "Cannot read property 'defaultIfNone' of undefined."

Expected behavior

Script runs properly.

Screenshots and/or logs

Uncaught TypeError: Cannot read property 'defaultIfNone' of undefined
    at HTMLFormElement.<anonymous> (fieldflow.js:1068)
    at HTMLDocument.dispatch (jquery.js:4737)
    at HTMLDocument.elemData.handle (jquery.js:4549)
(anonymous) @ fieldflow.js:1068
dispatch @ jquery.js:4737
elemData.handle @ jquery.js:4549

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome
• Version: 88

[jeffwylarsen]

Just did some more testing and this breaks even before initial submission. If you change the value of a select input after the checkboxes have been added, then the checkbox actions no longer register with the plugin.

[duboisp]

Have you tries to not use "toggle" action but the "addClass" and "removeClass" action instead and move the div#checkboxes outside its parent fieldflow div?

[jeffwylarsen]

Yeah, I tried with different actions and moving stuff around. The error seemed to come from wet creating an object for each of the checkboxes, but then if you change an option and reload the checkboxes, it doesn't destroy the old objects and creates new ones instead. Then, when it goes through the array of objects it can't find the original checkboxes any more.

I got around it by putting the checkboxes into a second wb-fieldflow instance, since their actions weren't dependent on the results of the first.