@lvce-editor/virtual-dom 1.22.0 → 1.23.0

package/dist/index.js

@@ -654,28 +654,40 @@ const rememberFocus = ($Viewlet, dom, eventMap, uid = 0) => {
   const isTreeFocused = activeElement?.getAttribute('role') === 'tree';
   const isRootTree = $Viewlet.getAttribute('role') === 'tree' && activeElement === $Viewlet;
   const focused = activeElement?.getAttribute('name');
+  const $Hidden = document.createElement('div');
+  $Hidden.style.display = 'none';
+  if (focused) {
+    if (document.body) {
+      document.body.append($Hidden);
+    }
+    // @ts-ignore
+    $Hidden.append(activeElement);
+  }
   const $$Inputs = queryInputs($Viewlet);
   const inputMap = Object.create(null);
   for (const $Input of $$Inputs) {
-    // @ts-ignore
     inputMap[$Input.name] = $Input.value;
   }
   if (uid) {
     const newEventMap = getEventListenerMap(uid);
     const $New = render(dom, eventMap, newEventMap).firstChild;
     setComponentUid($New, uid);
-    // @ts-ignore
+    const $$NewInputs = queryInputs($New);
+    for (const $Input of $$NewInputs) {
+      $Input.value = inputMap[$Input.name] || $Input.value || '';
+    }
     $Viewlet.replaceWith($New);
-    // @ts-ignore
+    if (focused) {
+      const $NewFocused = $Viewlet.querySelector(`[name="${focused}"]`);
+      if ($NewFocused) {
+        $NewFocused.replaceWith($Hidden.firstChild);
+      }
+    }
+    $Hidden.remove();
     $Viewlet = $New;
   } else {
     renderInto($Viewlet, dom, eventMap);
   }
-  const $$NewInputs = queryInputs($Viewlet);
-  for (const $Input of $$NewInputs) {
-    // @ts-ignore
-    $Input.value = inputMap[$Input.name] || $Input.value || '';
-  }
   if (isRootTree) {
     $Viewlet.focus();
   } else if (isTreeFocused) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/virtual-dom",
-  "version": "1.22.0",
+  "version": "1.23.0",
   "main": "dist/index.js",
   "type": "module",
   "keywords": [],

package/src/parts/RememberFocus/RememberFocus.ts

@@ -13,39 +13,47 @@ export const rememberFocus = (
   const oldTop = $Viewlet.style.top
   const oldWidth = $Viewlet.style.width
   const oldHeight = $Viewlet.style.height
-
   const { activeElement } = document
   const isTreeFocused = activeElement?.getAttribute('role') === 'tree'
   const isRootTree =
     $Viewlet.getAttribute('role') === 'tree' && activeElement === $Viewlet
-
   const focused = activeElement?.getAttribute('name')
-
+  const $Hidden = document.createElement('div')
+  $Hidden.style.display = 'none'
+  if (focused) {
+    if (document.body) {
+      document.body.append($Hidden)
+    }
+    // @ts-ignore
+    $Hidden.append(activeElement)
+  }
   const $$Inputs = QueryInputs.queryInputs($Viewlet)
   const inputMap = Object.create(null)
   for (const $Input of $$Inputs) {
-    // @ts-ignore
     inputMap[$Input.name] = $Input.value
   }
-
   if (uid) {
     const newEventMap = RegisterEventListeners.getEventListenerMap(uid)
-    const $New = VirtualDom.render(dom, eventMap, newEventMap).firstChild
+    const $New = VirtualDom.render(dom, eventMap, newEventMap)
+      .firstChild as HTMLElement
     ComponentUid.setComponentUid($New, uid)
-    // @ts-ignore
+    const $$NewInputs = QueryInputs.queryInputs($New)
+    for (const $Input of $$NewInputs) {
+      $Input.value = inputMap[$Input.name] || $Input.value || ''
+    }
     $Viewlet.replaceWith($New)
-    // @ts-ignore
+    if (focused) {
+      const $NewFocused = $Viewlet.querySelector(`[name="${focused}"]`)
+      if ($NewFocused) {
+        $NewFocused.replaceWith($Hidden.firstChild as HTMLElement)
+      }
+    }
+    $Hidden.remove()
     $Viewlet = $New
   } else {
     VirtualDom.renderInto($Viewlet, dom, eventMap)
   }
 
-  const $$NewInputs = QueryInputs.queryInputs($Viewlet)
-  for (const $Input of $$NewInputs) {
-    // @ts-ignore
-    $Input.value = inputMap[$Input.name] || $Input.value || ''
-  }
-
   if (isRootTree) {
     $Viewlet.focus()
   } else if (isTreeFocused) {
@@ -56,6 +64,7 @@ export const rememberFocus = (
     }
   } else if (focused) {
     const $Focused = $Viewlet.querySelector(`[name="${focused}"]`)
+
     if ($Focused) {
       // @ts-ignore
       $Focused.focus()