try to preserve focus and selection state when active element is repl…

…aced fixes bigskysoftware/htmx#75
strangeRabbit777 · Jun 11, 2020 · bdc39c5 · bdc39c5
1 parent 1d4c9fb
commit bdc39c5
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 2 deletions.
diff --git a/src/htmx.js b/src/htmx.js
@@ -893,6 +893,10 @@ return (function () {
             if (!nodeData.processed) {
                 nodeData.processed = true;
 
+                if (elt.value) {
+                    nodeData.lastValue = elt.value;
+                }
+
                 var triggerSpecs = getTriggerSpecs(elt);
                 var explicitAction = processVerbs(elt, nodeData, triggerSpecs);
 
@@ -1436,8 +1440,25 @@ return (function () {
                             target.classList.add("htmx-swapping");
                             var doSwap = function () {
                                 try {
+
+                                    var activeElt = document.activeElement;
+                                    var selectionInfo = {
+                                        elt: activeElt,
+                                        start: activeElt.selectionStart,
+                                        end: activeElt.selectionEnd,
+                                    };
+
                                     var settleInfo = makeSettleInfo(target);
                                     selectAndSwap(swapSpec.swapStyle, target, elt, resp, settleInfo);
+
+                                    if (!bodyContains(selectionInfo.elt) && selectionInfo.elt.id) {
+                                        var newActiveElt = document.getElementById(selectionInfo.elt.id);
+                                        if (selectionInfo.start && newActiveElt.setSelectionRange) {
+                                            newActiveElt.setSelectionRange(selectionInfo.start, selectionInfo.end);
+                                        }
+                                        newActiveElt.focus();
+                                    }
+
                                     target.classList.remove("htmx-swapping");
                                     forEach(settleInfo.elts, function (elt) {
                                         if (elt.classList) {

diff --git a/test/scratch.html b/test/scratch.html
@@ -29,8 +29,13 @@
     //
     // make('<div hx-get="/test">dd</div>')
 
-    this.server.respondWith("GET", "/test", '<div id="d1" style="color: red; margin: 100px">Foo</div>');
-    make('<div hx-swap="outerHTML" hx-get="/test" hx-push-url="true" id="d1">Foo</div>');
+    htmx.logAll();
+
+    this.server.respondWith("GET", "/test", function(xhr){
+        xhr.respond(201, {}, '<form><input hx-trigger="keyup delay:1s changed" hx-swap="outerHTML" hx-get="/test" id="i1" value="blahblah"/></form>')
+    });
+
+    make('<form hx-target="this"><input hx-trigger="keyup delay:1s changed" hx-swap="outerHTML" hx-get="/test" id="i1"/></form>');
 </script>