closest selector gets null on 'htmx-internal-data'

[phillip-haydon]

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.

<div....
  <form ....
      hx-indicator="closest .invite-button .htmx-indicator"
      hx-disabled-elt="closest .invite-button">
  
  </form>
</div>

<button class="invite-button">
    <i class="loading htmx-indicator"></i>
    Invite
</button>

So when I run this I get:

TypeError: Cannot read properties of null (reading 'htmx-internal-data')

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)

[Telroshan]

Hello,

• You seem to be using 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!