How to prevent LiveView from disabling all buttons in a form on submit regardless of buttons types?

Hi, I have a form with some embedded buttons which are handling JS interactions and have type “button”. I don’t want them disabled when submitting, because it causes ugly flicker. How can I make LiveView not disable them? LiveView documentation suggests that this should only apply to submit buttons, so maybe it’s a bug:

On submission of a form bound with a phx-submit event:

  1. The form’s inputs are set to readonly
  2. Any submit button on the form is disabled
  3. The form receives the "phx-submit-loading" class

The code to disable the buttons is here. I don’t see anything that would filter out type="button" buttons, so either the docs or the code are incorrect in that case and should be fixed.

Changing the filterButton function to el.tagName == "BUTTON" && el.getAttribute("type") !== "button" should do it, though that might technically be a breaking change.

If you need a hacky fix for now you could use a fake button (style a div). It seems like putting phx-update="ignore" on the button would also work but that would create other problems, obviously.

Edit:

The code also applies a PHX_DISABLED attribute to the button at the same time that the button is disabled, so if you want to be extra clever about it you could also change your styles to only style disabled buttons without that attribute. Untested but maybe something like this:

.mybutton[disabled]:not([PHX_DISABLED]) {
  filter: opacity(50%); // Or whatever
}

Or if you have no intention of ever disabling those buttons at all you could just remove the disabled styles completely for them, which would be the simplest option.

2 Likes

Thank you for the suggestions.

We went with replacing button elements with a.