tfwright / live_admin

Low-config admin UI for Phoenix apps, built on LiveView
MIT License
248 stars 22 forks source link

Array values getting dropped #63

Closed Rio517 closed 10 months ago

Rio517 commented 11 months ago

When validating or updating a record, the checked values for array fields get dropped.

For example, option one is checked, after validating, option one would be unchecked.

<div class="checkbox__group">
  <input id="params_additional_skills" name="params[additional_skills][]" type="hidden">

    <input checked="" id="params_additional_skillsone" name="params[additional_skills][]" type="checkbox" value="one">
    <label for="params_additional_skillsone">
      one
    </label>

    <input id="params_additional_skillstwo" name="params[additional_skills][]" type="checkbox" value="two">
    <label for="params_additional_skillstwo">
      two
    </label>

    <input id="params_additional_skillsthree" name="params[additional_skills][]" type="checkbox" value="three">
    <label for="params_additional_skillsthree">
      three
    </label>

    <input id="params_additional_skillsfour" name="params[additional_skills][]" type="checkbox" value="four">
    <label for="params_additional_skillsfour">
      four
    </label>
</div>

This is without using validate_with or save_with options on version 10.1

tfwright commented 11 months ago

I couldn't reproduce this using the dev app. If you post more information and/or an app that demonstrates the behavior I can take another look.

Rio517 commented 11 months ago

Ok. Ill try to create a demo app.

Rio517 commented 11 months ago

This seems to occur when using fields as such: field(:tags, {:array, Ecto.Enum}, values: [:one, :two, :three], default: [])

Demo app coming, just traveling at the moment and short on time!

tfwright commented 11 months ago

The dev app has an example of an enum array field: https://github.com/tfwright/live_admin/blob/c92f5be3c7818b0aa1ac88e7a5a8d5e2c18ef2ed/dev.exs#L179

The only thing I could different in your field definition is the default, but even after adding that, updating that field seems to work fine with none of the unexpected behavior you describe above.

tfwright commented 10 months ago

Closing this since I still haven't been able to reproduce, feel free to report again if you figure out what's causing the issue

Rio517 commented 10 months ago

Finally, the new info!

The checkbox app does work until you add an embeds_many. I added a commit to demonstrate the problem, also seen in this video.

Thanks in advance for reopening this issue!

https://github.com/tfwright/live_admin/assets/14241/8714fc1d-2f63-4dcc-a1e0-f109dc373a8c

For what it is worth, I had so many issues fighting nested form resources in my own apps. The new ecto sort_param and delete param are so helpful.

tfwright commented 10 months ago

@Rio517 it doesn't look like your video upload worked? The dev app now includes an example of editing an embeds_many with a array enum that appears to work fine: https://github.com/tfwright/live_admin/blob/0d4e727689c97d29597c8b449af8a9ce5e2d6779/dev.exs#L229

tfwright commented 10 months ago

Also, instead of a separate app, it would actually be even more helpful if you could edit the dev app code to reproduce the issue there. Since it involves an embed, it shouldn't even require db changes

Rio517 commented 10 months ago

Sure. I can take a look and ensure the dev app replicates the behavior. For clarity, here is the video again.

https://github.com/tfwright/live_admin/assets/14241/98eda07f-10fa-4ea7-95a8-c9b585b28f39

tfwright commented 10 months ago

Still won't load for me :(

Screenshot 2023-08-23 at 3 48 45 PM

Rio517 commented 10 months ago

Ergh! Frustrating that I can see it fine.

Link: https://imgur.com/a/5KlgLWN

tfwright commented 10 months ago

OK, I can see that, but I still can't replicate

https://github.com/tfwright/live_admin/assets/501/92f0ac46-08b9-41ab-89f4-ad10566bbdf2

What OS/browser are you using?

Rio517 commented 10 months ago

We have seen this behavior in both Chrome on Linux Mint 20.2 and Chrome on Mac.

I'm trying to test with your dev.exs app, but am stuck with an error when running trying to get the container up docker compose up

Error: Cannot find module 'esbuild'
web_1  | Require stack:
web_1  | - /opt/app/assets/esbuild.js

I'll have to investigate when I can, but it is late where I am so I have to head to bed.

Rio517 commented 10 months ago

I don't see the same issue in your single-page dev.exs app. However, I do see the issue in the live_admin Phoenix app I created and in my production app. Keep in mind, my demo app is really the minimum I could do to a brand-new phoenix app to recreate the issue. My guess is it is the more common case.

https://github.com/Rio517/live_admin_issue

I will spend some time aligning your dev.ex with my demo app to see if I can replicate the issue in your dev.exs.

tfwright commented 10 months ago

Good news, I was finally able to replicate using your app, as well as with the dev app. It looks like it affects records with existing value set for the enum array. To reproduce you just need to save a record with a value checked on the enum array and then add a new embed.

tfwright commented 10 months ago

bfc5ed0

So it turns out this wasn't related to embeds at all, but rather the implementation of the checkbox array. Apparently when applying form changes for enums, input_value will return the string representation of the enum value instead of the atom.

Rio517 commented 10 months ago

Thanks so much for finding that! What great news!