Open phillip-haydon opened 3 weeks ago
Hello,
closest
while your form is not a child of the button. As you said:
the trigger button is outside the form
But closest, as per the docs,
will find the closest ancestor element or itself, that matches the given CSS selector
So if your form is not a child of that button you're trying to target, htmx won't ever be able to reach it as none of the form's ancestors matches the selector
Also please note that, unfortunately, the extended CSS selectors are a bit limited at this time ; closest
can only go up the hierarchy but cannot chain selectors for now. So here, closest .invite-button .htmx-indicator
which should normally mean "find the closest .invite-button, then from there find the first .htmx-indicator child" will actually not work (that's something we'll want to fix in the future though!), while closest .invite-button
would be a valid selector.
As for traversing back/forward, you might want to look into next
and previous
extended selectors that may suit your usecase here
Hope this helps!
I maybe confused about how 'closest' works but I have a form which is loaded in a modal, and sometimes the same form in the page.
In both cases the trigger button is outside the form because of it displaying in different positions in the page vs modal.
Everything works with the submission without issue, however trying to work with
hx-indicator
/hx-disabled-elt
I have issues.So when I run this I get:
Shouldn't 'closest' be able to traverse back/forward from the trigger point (the form) to find the element with the class?
If I remove 'closest' it works but if the modal is open it makes the pages button also show the indicator and disabled state. (its not submitted, its just causing the button state to change even tho its not 'close' to the form being submitted)