phoenixframework
clarify that `phx-disable-with` can be blank in the docs
I was tearing my hair out over this and trying to implement it manually using hooks yesterday until I realized that this actually worked the way that I wanted it to. It couples well with Tailwind's built-in disabled variant, too. If this pull request is accepted, should I add a quick mention of that?
Note that if your button is inside of a form, it should get disabled by default, no need for phx-disable-with.
Ah, that makes sense. My particular use-case was not in a form, so I was surprised when I tested it with latency and found that it wasn't disabled. I'll update the pull request to note that.
Can you share a bit more about your issues? As Steffen said, every form button (so anything type="submit") already gets disabled for the duration of the submit, so what scenarios are you seeing that you need to add phx-disable-with? It shouldn't be required to disable the button.
Sure. I put together a repo with a reproduction of the problem. Make sure to turn the latency simulation on or the effect isn't apparent running locally for obvious reasons.
Basically, buttons, apparently only outside of forms, don't disable while waiting for the round trip after clicking them unless they have a phx-disable-with attribute, even a blank one. This seems to have been the behavior for at least a couple of years, judging by a forum post that I found.
Another oddity I just found while experimenting: Using JS.push("event", to: ".selector") propagates the disabled state to buttons that match the selector but only if those buttons have phx-disable-with, regardless of the presence of a form.
One last thing, although this one is probably intended: Buttons outside of forms but with phx-disable-with don't trigger the loading bar at the top of the page that a phx-submit does.
@DeedleFake I added a clarification to the docs and added you as co author. Thank you for bringing this up! :)