@lvce-editor/virtual-dom 1.6.0 → 1.7.0

package/dist/index.js

@@ -520,7 +520,10 @@ var rememberFocus = ($Viewlet, dom, eventMap, uid = 0) => {
   const oldTop = $Viewlet.style.top;
   const oldWidth = $Viewlet.style.width;
   const oldHeight = $Viewlet.style.height;
-  const focused = document.activeElement.getAttribute("name");
+  const activeElement = document.activeElement;
+  const isTreeFocused = activeElement?.getAttribute("role") === "tree";
+  const isRootTree = $Viewlet.getAttribute("role") === "tree" && activeElement === $Viewlet;
+  const focused = activeElement?.getAttribute("name");
   const $$Inputs = queryInputs($Viewlet);
   const inputMap = /* @__PURE__ */ Object.create(null);
   for (const $Input of $$Inputs) {
@@ -539,7 +542,14 @@ var rememberFocus = ($Viewlet, dom, eventMap, uid = 0) => {
   for (const $Input of $$NewInputs) {
     $Input.value = inputMap[$Input.name] || $Input.value || "";
   }
-  if (focused) {
+  if (isRootTree) {
+    $Viewlet.focus();
+  } else if (isTreeFocused) {
+    const $Tree = $Viewlet.querySelector('[role="tree"]');
+    if ($Tree) {
+      $Tree.focus();
+    }
+  } else if (focused) {
     const $Focused = $Viewlet.querySelector(`[name="${focused}"]`);
     if ($Focused) {
       $Focused.focus();

package/package.json

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

package/src/parts/RememberFocus/RememberFocus.ts

@@ -12,20 +12,25 @@ export const rememberFocus = (
   eventMap: any,
   uid = 0,
 ) => {
-  // TODO replace this workaround with
-  // virtual dom diffing
   const oldLeft = $Viewlet.style.left
   const oldTop = $Viewlet.style.top
   const oldWidth = $Viewlet.style.width
   const oldHeight = $Viewlet.style.height
-  // @ts-expect-error
-  const focused = document.activeElement.getAttribute('name')
+
+  const activeElement = document.activeElement
+  const isTreeFocused = activeElement?.getAttribute('role') === 'tree'
+  const isRootTree =
+    $Viewlet.getAttribute('role') === 'tree' && activeElement === $Viewlet
+
+  const focused = activeElement?.getAttribute('name')
+
   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 = RegisterEventListeners.getEventListenerMap(uid)
     const $New = VirtualDom.render(dom, eventMap, newEventMap).firstChild
@@ -37,12 +42,22 @@ export const rememberFocus = (
   } else {
     VirtualDom.renderInto($Viewlet, dom, eventMap)
   }
+
   const $$NewInputs = queryInputs($Viewlet)
   for (const $Input of $$NewInputs) {
     // @ts-ignore
     $Input.value = inputMap[$Input.name] || $Input.value || ''
   }
-  if (focused) {
+
+  if (isRootTree) {
+    $Viewlet.focus()
+  } else if (isTreeFocused) {
+    const $Tree = $Viewlet.querySelector('[role="tree"]')
+    if ($Tree) {
+      // @ts-ignore
+      $Tree.focus()
+    }
+  } else if (focused) {
     const $Focused = $Viewlet.querySelector(`[name="${focused}"]`)
     if ($Focused) {
       // @ts-ignore