[Live+Autocomplete] Wrong behavior of Autocomplete with dynamic forms

[simondaigre]

I have a Live component form with a Autocomplete input.
Autocomplete input is added or not depending on other form inputs.
When Autocomplete field is removed, tomselect field are not removed, because of data-live-ignore.

[norkunas]

Experiencing similar thing, in a multi-step form with live component:

• One step is with checkboxes which determines how many next steps will be rendered after; If selected at least 2:
• Next step is filled with all require data;
• Goes to one more next step which shows the same form, but the autocomplete shows the data from the previous step, thus always saying that the input should not be blank, while the UI shows that there are some selected entries.

[weaverryan]

To "fix" autocomplete + live components, I added data-ignore to it. This was (is) the only tool I had at my disposal at that time. But, it's too strong because if

• (A) that field completely disappears
• or (B) it renders, but has some changes to it (i.e. maybe its value should be reset to blank or it's now autocompleting from a different URL)

the field just "Stays as it is". This relates to #490. We need to identify all of the different possible behaviors for "ignore" and also make sure we have one that works for this situation.

For example, for:

When Autocomplete field is removed, tomselect field are not removed, because of data-live-ignore.

We need a behavior where data-ignore will ignore updates to an element, but will still remove the element entirely if it disappears. Or should that be the default behavior?

Also, another solution for autocomplete might be to intelligently use data-live-id. For example, we could generate a data-live-id attribute on the outer element that contains (potentially in a hash) the "value" (and maybe ? some other options) of the underlying field. Then, in combination with data-ignore, if, on re-render, the value has NOT changed for that field, the re-rendered HTML will use the same data-live-id and then LiveComponents JS will match up the new and existing elements, but then "avoid re-rendering" thanks to the data-ignore. But, if the value did change on the server, the data-live-id would be different. Live components would then remove the old element (this is a TODO: currently data-ignore makes it so that we NEVER remove these elements) and add the new one, which would cause TomSelect reinitialize.

[simondaigre]

I didn’t tested but what actually happens if I changes select options of a Autocomplete input ?
Because of the data-live-ignore, options are not updated.

IMHO all JS elements should be reinitialized when live updating.

[weaverryan]

IMHO all JS elements should be reinitialized when live updating.

Indeed, I think this is almost always what you want. However, the edge-case we want to avoid is that you (A) type into a firstName field then (B) start typing into your auto-complete field. But then, after typing 2 characters, the live component Ajax call from updating firstName completes, and your auto-complete is reinitialized while you're typing. So, we need to "reinitialize always"... except when reinitialization is not needed... in which case the entire element should not be touched at all during re-render (i.e. it behaves like data-ignore).

[weaverryan]

See #519 for a proposed solution