Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Gigitsu opened this issue Dec 16, 2024 · 1 comment
Open

Comments

@Gigitsu
Copy link

Gigitsu commented Dec 16, 2024

👋

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
Copy link
Member

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants