hx-disabled-elt documentation

[mdolk]

The current hx-disabled-elt documentation says the following

find which will find the first child descendant element that matches the given CSS selector

It then gives the following example

Here is an example that disables buttons and text input fields of a particular form during the request:

<form hx-post="/example" hx-disabled-elt="find input[type='text'], find button">
    <input type="text" placeholder="Type here...">
    <button type="submit">Send</button>
</form>

It should be noted that only the first text input field is disabled which is somewhat surprising when you have multiple in your form! I think this could be made clearer :-)

I think a less contrived example for disabling multiple input fields is using fieldsets.

<form hx-post="/example" hx-disabled-elt="find fieldset">
    <fieldset>
        <input type="text" placeholder="Type here...">
        <input type="text" placeholder="More input here...">
        <button type="submit">Send</button>
    </fieldset>
</form>

Cheers!

[Telroshan]

Hey, are you using the latest htmx version, i.e. v2.0.4?
hx-disabled-elt is indeed meant to disable both elements in this case.
We introduced support for multiple extended selectors in this one, so if you have an older version than 2.0.4, the second find button here will unfortunately not work at all.
We now have a test case for this exact scenario, so it should work, let us know if it doesn't!
Hope this helps

[mdolk]

Yes, I am using 2.0.4.

The problem isn't with multiple selector per se, each selector do match. The problem is that each selector will only match a single first element, which is surprising behaviour (to me at least).

So coming to the documentation and seeing the example made me think I could extend it and use it in a bigger form with multiple text inputs.

Example:

<form hx-post="/example" hx-disabled-elt="find input[type='text'], find button">
    <input id="i1" type="text" placeholder="Type here...">
    <input id="i2" type="text" placeholder="Another field...">
    <input id="i3" type="text" placeholder="Give me more data...">
    <button id="b1" type="submit">Send</button>
    <button id="b2" type="submit">Nuke</button>
</form>

In this case only i1 and b1 would become disabled. i2, i3, b2 will still be enabled.

The description of the original example is:

Here is an example that disables buttons and text input fields of a particular form during the request:

Note, it says "buttons" (plural), and "input fields" (plural).

The documentation does say that find will only find the first element, so it sort of work as advertised, but I don't think it is what most users want or expect given the description of the example in the docs.

Maybe there could be another operator findAll that would match everything, or change find to match all (breaking change?).

Am I making sense?

Thanks for a great project!

[Telroshan]

Oh right I see, thanks for the details, completely agree with you on that.
It's actually an issue of backwards compatibility ; find was introduced to return only the first match, as most attributes are single-element targeted this was not a problem at that time.
However, hx-indicator, hx-include and hx-disabled-elt work with multiple elements just fine, and back then, this was likely overlooked. Then, it was simply impossible to change as it could be a breaking change for existing users.

There's an ongoing proposal to support a new keyword to find multiple elements, see #1597 and #2326

As for the documentation, it's indeed incorrect to say those in plural form, feel free to open a PR if you feel like fixing it!

Also, note that for the time being, a workaround for this is to use a standard CSS selector (which always returned all matches in htmx's dev history)
So, if you put an id on the form, doing <form id="myForm" hx-post="/example" hx-disabled-elt="#myForm input[type='text'], #myForm button"> would catch all children inputs & buttons as you would expect