-
Notifications
You must be signed in to change notification settings - Fork 81
Description
I have the following code that hides and reveals a loading dialog/modal dynamically based on the loading state:
<span data-loading data-loading-delay="500">
<dialog open class="modal glass">
<div>
<p>
Task in progress. Please wait...
</p>
<progress class="progress w-56"></progress>
</div>
</dialog>
</span>
That appears to work on the surface, but due to how some browsers/frameworks interpret the dialog's open
attribute, this causes undesired behaviour when the dialog is open but hidden.
Ideally, I would like to be able to add the open
attribute dynamically based on the loading state, for example:
<span data-loading data-loading-delay="500">
<dialog class="modal glass" data-loading-attribute="open">
<div>
<p>
Task in progress. Please wait...
</p>
<progress class="progress w-56"></progress>
</div>
</dialog>
</span>
Notice the data-loading-attribute
attribute. The loading-states
extension could look at that attribute, and use it to dynamically add and remove the open
attribute.
@marisst @1cg Is this something that makes sense to add? I'll think of other alternatives to dynamically add/remove the open
attribute without needing to make changes to the loading-states
extension. I may need to rethink how I am doing this.
Here is another extension that can dynamically change attributes, but it is not linked to the loading states: https://github.com/jamcole/htmx-ext-attribute-tools/blob/main/README.md
I ended up resolving my particular issue by avoiding the open
attribute and using functionality exposed by daisyui:
<dialog data-loading="grid" data-loading-delay="500" data-loading-class="modal modal-open modal-middle glass">
<div>
<p>
Task in progress. Please wait...
</p>
<progress class="progress w-56"></progress>
</div>
</dialog>
However, having the ability to dynamically add/remove attributes based on loading states would still be useful.