Input names input_name and input_name[] should be treated as same name.

[Gigitsu]

👋

Environment

• Elixir version (elixir -v): Elixir 1.17.2 (compiled with Erlang/OTP 27)
• Phoenix version (mix deps): 1.7.18
• Phoenix LiveView version (mix deps): 1.0.1
• Operating system: *
• Browsers you attempted to reproduce this bug on (the more the merrier): Chrome
• Does the problem persist after removing "assets/node_modules" and trying again? Yes/no: yes

Actual behavior

In my form, I have a multi-select input accompanied by an empty hidden input, which I use to detect when no items in the select have been chosen. This allows me to empty the array field associated with that select. Here's an example of the structure:

<div class="wrapper">
  <input type="hidden" name="user[addresses]" />
  <select id="user_addresses" multiple="multiple" name="user[addresses][]" placeholder="Addresses">
    ...
  </select>
</div>

When I edit any input in the form, this select field is marked as "used" and shows an error.

After debugging the new live_view/view.js file, I discovered that, in this loop, the hidden input and the select are treated as different fields because they have different names:

- user[addresses]
+ user[addresses][]

Expected behavior

This inputs should be treated as the same input, perhaps changing this line:

  for(let [key, val] of formData.entries()){
    if(onlyNames.length === 0 || onlyNames.indexOf(key) >= 0){
-     let inputs = elements.filter(input => input.name === key)
+     let inputs = elements.filter(input => input.name === key ||  input.name === `${key}[]`)
      let isUnused = !inputs.some(input => (DOM.private(input, PHX_HAS_FOCUSED) || DOM.private(input, PHX_HAS_SUBMITTED)))
      let hidden = inputs.every(input => input.type === "hidden")
      if(isUnused && !(submitter && submitter.name == key) && !hidden){
        params.append(prependFormDataKey(key, "_unused_"), "")
      }
      params.append(key, val)
    }

could work.

[josevalim]

I am afraid this will lead to further pitfalls down the road because anything that considers the name, including browsers features, will not consider user[addresses] to be the same as user[addresses][]. For example, FormData uses the same name for grouping, and that would not work elsewhere or any other JS library that you or we might use. So I disagree with the overall proposal.

Either handle the missing field on the server or add:

<input type="hidden" name="user[addresses][]" value="" />

And discard empty values on the server.

[Gigitsu]

Either handle the missing field on the server or add:

<input type="hidden" name="user[addresses][]" value="" />

And discard empty values on the server.

I ended up doing both: I added an empty user[addresses][] value and, on the server, I matched ["" | values] so I can filter out the first, always-present empty value.

But now I'm wondering: is there a way to disable the appending of _unused_ fields? I have some plain forms not bound to any entity, which I use for filtering purposes.

In this case, the presence of these _unused_ fields breaks my filter logic, and I have to remove them on the server.

[SteffenDE]

But now I'm wondering: is there a way to disable the appending of unused fields? I have some plain forms not bound to any entity, which I use for filtering purposes.

There is not, but we could probably add something to opt-out.

[Gigitsu]

That would be greatly appreciated. Perhaps a phx-something (eg. phx-no-used-check) flag to the form could be helpful.

I could help developing this.

[SteffenDE]

opinions? @chrismccord @josevalim