Skip to content

Search within the element in htmx.find() and htmx.findAll() - #4200

Open
fizzbeom wants to merge 1 commit into
bigskysoftware:four-devfrom
fizzbeom:fix/find-within-element
Open

fizzbeom wants to merge 1 commit into
bigskysoftware:four-devfrom
fizzbeom:fix/find-within-element

Conversation

@fizzbeom

@fizzbeom fizzbeom commented Nov 5, 2026

Copy link
Copy Markdown

Description

htmx.find(elt, selector) and htmx.findAll(elt, selector) ran plain CSS selectors on the element's root node, so they returned matches from the whole document. The reference page says the element is the one to "search within", and htmx 2 used elt.querySelectorAll(selector).

<div id="a"><span class="x"></span></div>
<div id="b"></div>
<script>
  htmx.findAll(document.getElementById('b'), '.x').length // 1 before, 0 now
</script>

Changes:

  • findAll passes a new scoped flag to __findAllExt. With an element argument, plain selectors are matched within it. Extended selectors (closest, next, find, global, ...) still resolve relative to the element, as before. find returns the first result of findAll.
  • hx-targets called htmx.findAll(ctx.sourceElement, selector) to resolve its selector like hx-target (whole document). It now calls a new internal API, api.findAllExt, so its behavior is unchanged. I added it to the two extension API lists that check_extension_api.py checks.

Corresponding issue: #4173

Testing

  • New unit tests in test/tests/unit/__findAllExt.js: findAll(elt, selector) and find(elt, selector) only match within elt, and extended selectors still work relative to elt. The first two fail without the fix.
  • New test/tests/ext/hx-targets.js (the extension had no tests): a plain selector outside the source element and an extended selector. The first test fails if hx-targets keeps calling htmx.findAll.
  • npm run test: 1855 passed, 0 failed, 4 skipped, coverage 100% (Chromium, Windows).
  • python3 src/scripts/content/check.py passes.

Checklist

  • I have read the contribution guidelines
  • I have targeted this PR against the correct branch (four-dev for htmx 4 source changes)
  • This is either a bugfix, a documentation update, or a new feature that has been explicitly
    approved via an issue
  • I ran the test suite locally (npm run test) and verified that it succeeded

This PR was generated with AI (Claude Code).

htmx.find(elt, selector) and htmx.findAll(elt, selector) ran plain CSS
selectors on elt's root node, so they returned matches from the whole
document. The docs say they search within the element, and htmx 2 did.

With an element argument, plain selectors now match within it. Extended
selectors (closest, next, find, global, ...) keep working relative to the
element. hx-targets relied on the old behavior to resolve its selector
like hx-target, so it now uses a new internal API, findAllExt.

Fixes bigskysoftware#4173

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant