list.append() consistency JS/No-JS

[tavoyne]

When an item is appended to an array using list.append(), the behavior differs between JS and No-JS.

In No-JS: The defaultValues of items are updated.

In JS: The defaultValues of items remain the same, which is not too problematic because, since the page doesn't reload, inputs keep their current values.

Yet, I believe the JS behavior should be consistent with the No-JS behavior. This change would enable more complex UI features, such as having an input that adds tags.

<>
  <ul>
    {tags.slice(0, tags.length - 1).map((tag, index) => {
      return (
        <li key={tag.key}>
          <input type="hidden" {...conform.input(tag)} />
          {tag.defaultValue}
          <button {...list.remove(fields.tags.name), { index }}>Add</button>
        </li>
      );
    })}
  </ul>
  <input
    key={tags.at(-1)}
    placeholder="Enter a tag..."
    {...conform.input(tags.at(-1))}
  />
  <button {...list.append(fields.tags.name)}>Add</button>
</>

This works as expected when JS is disabled, but not when it is enabled.

[edmundhung]

Hi @tavoyne, thanks for the idea!

This is a tricky question. The default value should have been updated correctly when you click on the button no matter with or without JS. The only difference I can see is the default value of the rest of the items changes as well in NoJS as Conform tries to persist the form data across document reload and so the default value of each field is changed to its last submitted value. If this is what you are referring to, then it would be quite expensive to keep it in-sync. As that's literally means updating the default value as user types (by triggering a re-render).