satisfy tsc.

bigskysoftware · Jan 14, 2025 · 29e4995 · 29e4995
1 parent 1f858a9
commit 29e4995
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 8 deletions.
diff --git a/src/idiomorph.js b/src/idiomorph.js
@@ -68,6 +68,7 @@
  * @property {'outerHTML' | 'innerHTML'} morphStyle
  * @property {boolean} [ignoreActive]
  * @property {boolean} [ignoreActiveValue]
+ * @property {boolean} [restoreFocus]
  * @property {ConfigCallbacksInternal} callbacks
  * @property {ConfigHeadInternal} head
  */
@@ -180,28 +181,37 @@ var Idiomorph = (function () {
     });
   }
 
+  /**
+   * @param {MorphContext} ctx
+   * @param {Function} fn
+   * @returns {Promise<Node[]> | Node[]}
+   */
   function saveAndRestoreFocus(ctx, fn) {
     if (!ctx.config.restoreFocus) return fn();
 
     let activeElement = document.activeElement;
-    let activeElementId, selectionStart, selectionEnd;
 
+    // don't bother if the active element is not an input or textarea
     if (
-      activeElement &&
-      ["INPUT", "TEXTAREA"].includes(activeElement.tagName)
+      !(
+        activeElement instanceof HTMLInputElement ||
+        activeElement instanceof HTMLTextAreaElement
+      )
     ) {
-      activeElementId = activeElement.id;
-      selectionStart = activeElement.selectionStart;
-      selectionEnd = activeElement.selectionEnd;
+      return fn();
     }
 
+    const { id: activeElementId, selectionStart, selectionEnd } = activeElement;
+
     const results = fn();
 
     if (activeElementId && activeElementId !== document.activeElement?.id) {
       activeElement = ctx.target.querySelector(`#${activeElementId}`);
-      activeElement.focus();
+      // @ts-ignore we can assume this is focusable
+      activeElement?.focus();
     }
-    if(selectionStart, selectionEnd) {
+    if (activeElement && selectionStart && selectionEnd) {
+      // @ts-ignore we know this is an input element
       activeElement.setSelectionRange(selectionStart, selectionEnd);
     }
 

diff --git a/test/lib/utilities.js b/test/lib/utilities.js
@@ -71,6 +71,10 @@ function setFocusAndSelection(elementId, selectedText) {
   element.setSelectionRange(index, index + selectedText.length);
 }
 
+function setFocus(elementId) {
+  document.getElementById(elementId).focus();
+}
+
 function assertFocusAndSelection(elementId, selectedText) {
   assertFocus(elementId);
   const activeElement = document.activeElement;

diff --git a/test/restore-focus.js b/test/restore-focus.js
@@ -230,4 +230,52 @@ describe("Option to forcibly restore focus after morph", function () {
     getWorkArea().innerHTML.should.equal(finalSrc);
     assertFocusAndSelection("focused", "b");
   });
+
+  it("restores focus and selection state with a textarea", function () {
+    getWorkArea().innerHTML = `
+      <div>
+        <textarea id="focused">abc</textarea>
+        <textarea id="other"></textarea>
+      </div>
+    `;
+    setFocusAndSelection("focused", "b");
+
+    let finalSrc = `
+      <div>
+        <textarea id="other"></textarea>
+        <textarea id="focused">abc</textarea>
+      </div>
+    `;
+    Idiomorph.morph(getWorkArea(), finalSrc, {
+      morphStyle: "innerHTML",
+      restoreFocus: true,
+    });
+
+    getWorkArea().innerHTML.should.equal(finalSrc);
+    assertFocusAndSelection("focused", "b");
+  });
+
+  it("does nothing if a non input/textarea el is focused", function () {
+    getWorkArea().innerHTML = `
+      <div>
+        <p id="focused"></p>
+        <p id="other"></p>
+      </div>
+    `;
+    setFocus("focused");
+
+    let finalSrc = `
+      <div>
+        <p id="other"></p>
+        <p id="focused"></p>
+      </div>
+    `;
+    Idiomorph.morph(getWorkArea(), finalSrc, {
+      morphStyle: "innerHTML",
+      restoreFocus: true,
+    });
+
+    getWorkArea().innerHTML.should.equal(finalSrc);
+    assertNoFocus();
+  });
 });