DisableWithController
Purpose
Disable an input/button/link when it is clicked, to prevent double-submissions.
Designed to emulate UJS's data-disable="true" and data-disable-with="Please wait..." for new applications, particularly those using Hotwired.
Actions
| Action | Purpose |
|---|---|
disable | Disable the connected element, cache its default text/label and set its text/label to the messageValue. Repeated calls to disable will simply event.preventDefault to prevent clicks on the disabled event. |
enable | Enable the connected element, and restore its default text value/label. Calling enable on an element that has not been disabled is a no-op. |
Targets
| Target | Purpose | Default |
|---|---|---|
- | - | - |
Classes
| Class | Purpose | Default |
|---|---|---|
- | - | - |
Values
| Value | Type | Description | Default |
|---|---|---|---|
message (Optional) | String | The text to show in the connected element while it is disabled | "Submitting..." |
Events
| Event | When | Dispatched on | event.detail |
|---|---|---|---|
- | - | - | - |
Side Effects
Sets an event listener for click on the connected element that fires the disable action.
Sets a timeout using setTimeout with the provided/default timeoutValue.
How to Use
Example - when creating an event that can have the end_time turned off with a boolean: