From b5408727200d8ac63e1331ab793e66008c5da586 Mon Sep 17 00:00:00 2001 From: Steffen Deusch Date: Thu, 14 Nov 2024 20:23:13 +0100 Subject: [PATCH] clarify that phx-disable-with can be blank in the docs Closes #3444. Co-authored-by: DeedleFake --- guides/client/form-bindings.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/guides/client/form-bindings.md b/guides/client/form-bindings.md index d06777c35..968b001f1 100644 --- a/guides/client/form-bindings.md +++ b/guides/client/form-bindings.md @@ -336,6 +336,22 @@ the "Save" button to "Saving...", and restore it to "Save" on acknowledgment: ``` +> #### A note on disabled buttons {: .info} +> +> By default, LiveView only disables submit buttons and inputs within forms +> while waiting for a server acknowledgement. If you want a button outside of +> a form to be disabled without changing its text, you can add `phx-disable-with` +> without a value: +> +> ```heex +> +> ``` +> +> Note also that LiveView ignores clicks on elements that are currently awaiting +> an acknowledgement from the server. This means that although a regular button +> without `phx-disable-with` is not semantically disabled while waiting for a +> server response, it will not trigger duplicate events. + You may also take advantage of LiveView's CSS loading state classes to swap out your form content while the form is submitting. For example, with the following rules in your `app.css`: