htmx
htmx copied to clipboard
"revealed" event conflicts with other events, causing the revealed event to stop working
When using hx-trigger="revealed, click" or any other event or custom event, AND the element is below the fold (so that you have to scroll into it) the "revealed" event won't be triggered, but the other event still works.
I've found this bug trying to trigger the request with both "revealed" and some custom event from the server
<span hx-get="{% url 'contacts_count' %}" hx-trigger="updatecount from:body, revealed">
loading...
</span>
I've created a minimal example that reproduces this problem:
https://jsfiddle.net/danielnieto/a6gwjL5u/
I can confirm that if you remove the "click" event from the hx-trigger attribute in the example I posted then "revealed" starts working again, also, when the page loads if the element is already on screen then "revealed" works as expected even if it's combined with other events.
Try for yourself, you can edit the JSFiddle link above and click on the play button top left
Steps to reproduce:
- Create HTML with lots of content, so you have to scroll down to get to the bottom
- Use
hx-trigger="revealed, click"on an element at the bottom of the page
Hi, the fact it is not working in the fiddle should be due to the overflow of the preview box. You'd need to use intersect once as trigger here.
If your site uses overflow:scroll related to that element, you need to switch to an event like the above intersect and fire it once.
I don't think that's the issue, since the same happens when I copy the html into a file and open it with my browser locally, as you can see in the file there's no CSS, also, it works when removing the other event, so the issue only happens when using "revealed" + other event
I've created a PR to fix this, it turns out, the mechanism that tries to reveal elements when scrolling only matches exact hx-trigger='revealed' attribute so, if you use more events, the querySelector would not return any element, thus, not executing the maybeReveal function. I've added a wildcard (*) to match any hx-trigger attribute containing 'reveal'
Oh! Good catch. :)
Seems I was too obsessed with the overflow and didn’t test it properly.
It should not work in a y-overflowed scroll box though.
Resolved in 8c61e71