Tangerine-Community / tangy-form

<tangy-form> is a web component for creating multipage forms. Other <tangy-*> input elements are included as well.
GNU General Public License v3.0
15 stars 3 forks source link

Add support for skipping items by defining cycle sequences #279

Closed rjcorwin closed 3 years ago

rjcorwin commented 3 years ago

This PR add support for skipping items by defining cycle sequences that don't cover all items in a form. Here's the form from the test in this PR, note how the cycle sequences defined should never allow item2 to appear.

        <tangy-form id="SkipSecondItemCycleSequences" title="My Form" cycle-sequences="1,3
        1,3
        1,3">
          <tangy-form-item id="item1" title="1">
            <tangy-input name="input1" label="What is your last name?"></tangy-input>
          </tangy-form-item>
          <tangy-form-item id="item2" title="2">
            <tangy-input name="input2" label="What is your last name?"></tangy-input>
          </tangy-form-item>
          <tangy-form-item id="item3" title="3">
            <tangy-input name="input3" label="What is your last name?"></tangy-input>
          </tangy-form-item>
        </tangy-form>

Prior to this PR, if you left out an index in a sequence, that item would become orphaned in the state data which results in the appearance of that orphaned item as an unopened item when you were actually in some other item filling out the form.

Screen Shot 2021-10-11 at 4 00 14 PM

Note on this line how we are making sure that items not defined in the sequence are making into the items state, but disabled. With those items in the state, the disabled flag is applied and they are properly hidden.