search

ing-bank / lion

Fundamental white label web component features for your design system.
https://lion.js.org
MIT License
1.77k stars 295 forks source link

Interleaving form field throws #2410

Open takrishna opened 1 week ago

takrishna commented 1 week ago

Expected behavior

lion form to allow new fields to be inserted in between fields (interleaved) in a form that has already been rendered (say, upon re-render).

Actual Behavior

lion form assumes that no new fields can be inserted/interleaved in a form and throws an exception. However when the new field is inserted in the end it works as expected without any errors.

Reproduced here: URL: https://stackblitz.com/~/github.com/takrishna/lion-demo/tree/takrishna/interleave-field-in-a-form?file=lion-demo.js:L26

Branch: takrishna/interleave-field-in-a-form

Additional context

Uncaught TypeError: Name "input_2" is already registered - if you want an array add [] to the end at LionForm.addFormElement (FormRegistrarMixin.js:177:17) at LionForm.addFormElement (FormGroupMixin.js:542:13) at LionForm._onRequestToAddFormElement (FormRegistrarMixin.js:242:12) at LionInput.connectedCallback (FormRegisteringMixin.js:35:12) at LionInput.connectedCallback (FormControlMixin.js:258:13) at LionInput.connectedCallback (ValidateMixin.js:271:13) at LionInput.connectedCallback (FormatMixin.js:554:13) at LionInput.connectedCallback (InteractionStateMixin.js:126:13) at LionInput.connectedCallback (LionField.js:39:11) at ChildPart._insert (lit-html.js:871:56)

I am trying to solve a requirement where the user answers the first question and depending upon the answer of the first question we display some additional questions.

tlouisse commented 1 day ago

Thanks for the excellent reproduction

I added a fork of it with a fix: https://stackblitz.com/~/github.com/takrishna/lion-demo/tree/takrishna/interleave-field-in-a-form?file=lion-demo.js

The solution is a keyed repeat directive. Would you be willing to contribute some docs on Lion for this?