itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2026-04-17 11:34:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

try to preserve focus and selection state when active element is replaced

Browse Source 
fixes https://github.com/bigskysoftware/htmx/issues/75
This commit is contained in:
carson
2020-06-11 06:53:18 -07:00
parent 1f62541094
commit 2ac221bdbc
2 changed files with 28 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/htmx.js
View File

@@ -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) {

9
test/scratch.html
View File

@@ -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>