Possible regression with <a href="..." hx-get=".."

[phillip-haydon]

I'm wondering if I've missed something in the release notes or if there is a regression with applying hx-get on an <a href=... tag.

In 2.0.4 I have

<a href="..."
     hx-get="..."
     hx-target="..."
     hx-swap="innerHTML">
  Link
</a>

In 2.0.4:

When I click this before htmx has parsed the page, href is used and causes a full navigation to the url. ✅
When htmx is parsed on the page, href is ignored and hx-get picks it up and does a swap on the target. ✅

In 2.0.5:

When I click this before htmx has parsed the page, href is used and causes a full navigation to the url. ✅
When htmx is parsed on the page, hx-get is ignored and it does a full navigation to the url. 🚫

This happens for me just upgrading from 2.0.4 > 2.0.5

[MichaelWest22]

I'm unable to reproduce this with your example html content. are you able to check my jsfiddle https://jsfiddle.net/Latent22/y9ghncpk/19/ and see if you can reproduce your issue here?

[phillip-haydon]

Noted, I'll figure out how to reproduce it outside of my project. At the moment I just know on 2.0.4 everything works perfect. Update to 2.0.5 and it goes bung :(

[MichaelWest22]

Yeah let me know if you get stuck trying to find the repro. Would be good to get this fixed if it is a real issue. You can try running htmx.logAll() in console to confirm you don't get any htmx events when you click the link as this would tell us that somehow the htmx event listener on click is not setup or firing properly.

[MichaelWest22]

#3336 is the only change I can see that could maybe be related. This change is to handle some clicking edge cases but I can't see how it would impact a link as the event target will be the link element so this should be fine.

You could try going into dev tools source tab and adding a beakpoint at this line and then clicking the link to confirm if the shouldCancel() function is called fine with the right evt.target data so it can detect it is a link and cancel the default click behaviour like we need it to.

[seralot]

I'm having the same issue. When I add an element inside the <a>, like a <span>, I can reproduce it with the example you shared: https://jsfiddle.net/5yp1v2j0/. The evt.target ends up being the span, so the shouldCancel isn't running.

[MichaelWest22]

Thanks @seralot this is likely the cause of the issue. seems you can also repo the issue in older htmx if you put the htmx attributes on the span instead of the . Any click event that is captured by htmx I don't think you would want to trigger the wrapping link. But anyone trying this in the past would have likely found this and stopped doing this pattern.

But placing things like buttons inside links so the button works with htmx and falls back to perform a link with no JS for progressive enhancement is likely a common pattern which will break with 2.0.5.

I will check how we can fix this now

[MichaelWest22]

@seralot @phillip-haydon are you able to test with a patched version of 2.0.5 https://michaelwest22.github.io/htmx/htmx-2-0-5-fix.js to confirm this fixes your issue?

updated a couple of lines to now find the closest wrapping link to prevent which should resolve the issue.

      elt = elt.closest('a')
      // @ts-ignore check for a link wrapping the event elt or if elt is a link. elt will be link so href check is fine
      if (elt && elt.href &&
        (elt.getAttribute('href') === '#' || elt.getAttribute('href').indexOf('#') !== 0)) {
        return true
      }

[seralot]

Yes, I just tried it and it solves the problem. Thank you @MichaelWest22 .

[MichaelWest22]

now fixed in 2.0.6 thanks to @1cg

[phillip-haydon]

Thank you @seralot for reproducing it. Thanks @MichaelWest22 / @1cg - fix works flawlessly!