-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Support multiple extended selectors for hx-include, hx-trigger from, and hx-disabled-elt #2902
base: dev
Are you sure you want to change the base?
Support multiple extended selectors for hx-include, hx-trigger from, and hx-disabled-elt #2902
Conversation
Support multiple extended selectors for hx-include Additional test for nested standard selector Add @MichaelWest22 hx-disabled-elt multiple selector test Add hx-trigger `from` test with multiple extended selectors Simplify Include bigskysoftware#2915 fix Update htmx.js Split for readability Don't apply global to previous selectors Rewrite loop, restore global recursive call, minimize diff Use break for better readability Co-Authored-By: MichaelWest22 <12867972+MichaelWest22@users.noreply.github.com>
After discussion with @1cg, here's the direction this PR should take:
I'll work on these changes when I have the chance |
8e23149
to
4466697
Compare
You might be able to add support for the let selectors = selector
forEach(selectors.match(/<.*?\/>/g), function(enclosed) {
selectors = selectors.replace(enclosed, enclosed.replaceAll(',', '%2C'))
})
const parts = selectors.split(',') Trying to split on the commas but ignore the commas in the enclosed tags is very complex to do with just a regex so here I've just used the most basic regex to find all enclosed portions of the full selectors input string and then for each one replace all the commas with an encoded comma and update this in the main selectors string. Finally you can just add the reverse of this comma encoding in the normalizeSelector() function cf10b71 example commit One thing to note is the next/previous/closest/find extended selectors only return a single node by design so supporting multiple css selectors via the list |
I'm fine w/ a loop-based mini-lexer, the logic isn't too brutal (basically count "<" and "/>") and ignore commas when count > 0) but I'm happy with whatever solution y'all come up w/ |
Description
hx-include
will include all elements matching the given selector, but currently only supports 1 extended selector at a time, meaning thatwill work, and include values from all elements that match any of these 2 selectors.
Using 1 extended selector works well, like
will retrieve the first child input's value, and works as expected.
However, the following won't work:
Htmx will currently simply parse the first
find
keyword and useinput, previous input
as the selector to test against previous elements. So, the second partprevious input
won't work at all, as itsprevious
keyword won't even be interpreted by htmx.It will instead be processed as a standard selector, meaning searching for an
input
under aprevious
tag (which ofc, doesn't exist)Explanations
This PR does the following:
querySelectorAll
as it used to.Corresponding issue: #2645
Testing
Added 2 test cases
Checklist
master
for website changes,dev
forsource changes)
approved via an issue
npm run test
) and verified that it succeeded