Allow extended CSS selectors to be used with normal CSS selectors

[rtoi]

Hi,

I have many times tried to do something like the following:

<div>
    <input name="i1" value="test1-1"/>
    <button hx-include="closest div, #hid" id="btn1" hx-target="#info" hx-post="/inc.php"></button>
</div>
<input name="hid" id="hid" type="hidden" value="test3"></input>

I.e. I want to use both an extended CSS selector and a "normal" CSS selector In hx-include attribute. However, the querySelectorAllExt function processes only the extended CSS selector at the begin of the string (closest div, #hid) and leaves the other part after the comma unprocessed. If the attribute value is set other way round, i.e. "#hid, closest div", then the querySelectorAllExt will interpret the string as containing only normal CSS selectors.

To overcome the problem, I modified the querySelectorAllExt function to split the selector argument into parts at commas and then process all parts recursively as follows:

         function querySelectorAllExt(elt, selector) {
+            if (selector.indexOf(",") < 0) {
             if (selector.indexOf("closest ") === 0) {
                 return [closest(elt, normalizeSelector(selector.substr(8)))];
             } else if (selector.indexOf("find ") === 0) {
@@ -609,6 +610,12 @@ return (function () {
                 return getDocument().querySelectorAll(normalizeSelector(selector));
             }
         }
+            var ret = [];
+            selector.split(',').forEach((item) => {
+                ret.push.apply(ret, querySelectorAllExt(elt, item.trim()));
+            });
+            return ret;
+        } 

For me this change was valuable. Is this something that could be adopted to HTMX in general?

ps.
I don't know how good or bad the the way how nodelists are merged together by ret.push.apply really is. Anyways, after the change there were no test failures.