phx-disable-with on a <form> destroys contained elements at submit

[Chris Wood]

Environment

• Elixir version (elixir -v): 1.16.0
• Phoenix version (mix deps): 1.7.12
• Phoenix LiveView version (mix deps): 0.8.3
• Operating system: MacOS
• Browsers you attempted to reproduce this bug on (the more the merrier): Firefox
• Does the problem persist after removing "assets/node_modules" and trying again? Yes/no: No

Actual behavior

Submitting a <form> with attribute phx-disable-with set results in putRef() writing the form's innerText back to innerText, effectively flattening contained elements to text.

Expected behavior

phx-disable-with is allowed on more than just buttons (at least links too), but doesn't make on forms, so should be ignored?

[Steffen Deusch]

According to mdn, disabled is only supported on specific elements, form not being one of them: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled#overview. I don't think it is supposed to work on other elements.

If you feel like the documentation around phx-disable-with could be better, feel free to open a PR to improve it :)

[Chris Wood]

Understood re `disabled` not working on other elements. In case I wasn't clear, I wasn't expecting `phx-disabled-with` to work on `<form>`. I encountered it in a codebase, where it had been added mistakenly. I suppose I am arguing this is a small footgun, or at least is surprising, as there *is* an effect, whereas in your example adding `disabled` to a `form` in basic HTML has no effect -- the attribute is ignored.

…

On 24 Apr 2024, at 14:22, Steffen Deusch ***@***.***> wrote: According to mdn, disabled is only supported on specific elements, form not being one of them: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled#overview. I don't think it is supposed to work on other elements. If you feel like the documentation around phx-disable-with could be better, feel free to open a PR to improve it :) — Reply to this email directly, view it on GitHub <#3224 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAIWRCLAUSVJYDNDGBQFFLTY66WX3AVCNFSM6AAAAABGWZHOK2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDANZUHEZTQMJYHE>. You are receiving this because you authored the thread.

[Chris McCord]

We set a bunch of internal state on the disable-with elements, and per the docs, we only support textual content. So this is behaving as expected and will necessarily mess up a form with HTML nodes. I don't think we want to guard against invalid tags and checking the contents can also be costly, so I don't think there's enough evidence that folks hit this a lot in practice. Thanks!