@lvce-editor/renderer-process 30.23.0 → 30.23.2

package/dist/editorOnlyRendererProcessMain.js

@@ -2412,9 +2412,10 @@ const restoreFocusedElement = ($Hidden, $New, focused) => {
   }
   $NewFocused.replaceWith($Previous);
 };
-const renderWithUid = ($Viewlet, dom, eventMap, uid, inputMap, focused, $Hidden) => {
+const renderWithUid = ($Viewlet, dom, eventMap, uid, inputMap, focused, activeElement) => {
   const newEventMap = getEventListenerMap(uid);
   const $New = render$1(dom, eventMap, newEventMap).firstChild;
+  const $Hidden = createHiddenContainer($New.contains(activeElement || null) ? undefined : activeElement, focused);
   setComponentUid($New, uid);
   const $$NewInputs = queryInputs($New);
   for (const $Input of $$NewInputs) {
@@ -2424,6 +2425,7 @@ const renderWithUid = ($Viewlet, dom, eventMap, uid, inputMap, focused, $Hidden)
   if (focused) {
     restoreFocusedElement($Hidden, $New, focused);
   }
+  $Hidden.remove();
   return $New;
 };
 const restoreFocus = ($Viewlet, isRootTree, isTreeFocused, focused) => {
@@ -2459,16 +2461,16 @@ 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') || null;
-    const $Hidden = createHiddenContainer(activeElement, focused);
     if (uid) {
       const numericUid = Number(uid);
       const inputMap = getInputMap($Viewlet);
-      $Viewlet = renderWithUid($Viewlet, dom, eventMap, numericUid, inputMap, focused, $Hidden);
+      $Viewlet = renderWithUid($Viewlet, dom, eventMap, numericUid, inputMap, focused, activeElement);
     }
     if (!uid) {
+      const $Hidden = createHiddenContainer(activeElement, focused);
       renderInto($Viewlet, dom, eventMap);
+      $Hidden.remove();
     }
-    $Hidden.remove();
     restoreFocus($Viewlet, isRootTree, isTreeFocused, focused);
     $Viewlet.style.top = oldTop;
     $Viewlet.style.left = oldLeft;
@@ -2536,6 +2538,13 @@ const focusSelector = (uid, selector) => {
   const element = getElement(uid).querySelector(selector);
   element?.focus();
 };
+const focusSelectorAfterRender = (uid, selector) => {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      focusSelector(uid, selector);
+    });
+  });
+};
 const setBounds = (uid, left, top, width, height) => {
   const element = getElement(uid);
   element.style.left = `${left}px`;
@@ -2580,6 +2589,7 @@ const setValueByName = (uid, name, value) => {
 const commandHandlers = {
   'Viewlet.dispose': dispose,
   'Viewlet.focusSelector': focusSelector,
+  'Viewlet.focusSelectorAfterRender': focusSelectorAfterRender,
   'Viewlet.setAdditionalFocus': ignoreCommand,
   'Viewlet.setBounds': setBounds,
   'Viewlet.setCss': addCssStyleSheet,

package/dist/rendererProcessMain.js

@@ -1566,9 +1566,10 @@ const restoreFocusedElement = ($Hidden, $New, focused) => {
   }
   $NewFocused.replaceWith($Previous);
 };
-const renderWithUid = ($Viewlet, dom, eventMap, uid, inputMap, focused, $Hidden) => {
+const renderWithUid = ($Viewlet, dom, eventMap, uid, inputMap, focused, activeElement) => {
   const newEventMap = getEventListenerMap(uid);
   const $New = render(dom, eventMap, newEventMap).firstChild;
+  const $Hidden = createHiddenContainer($New.contains(activeElement || null) ? undefined : activeElement, focused);
   setComponentUid($New, uid);
   const $$NewInputs = queryInputs($New);
   for (const $Input of $$NewInputs) {
@@ -1578,6 +1579,7 @@ const renderWithUid = ($Viewlet, dom, eventMap, uid, inputMap, focused, $Hidden)
   if (focused) {
     restoreFocusedElement($Hidden, $New, focused);
   }
+  $Hidden.remove();
   return $New;
 };
 const restoreFocus = ($Viewlet, isRootTree, isTreeFocused, focused) => {
@@ -1613,16 +1615,16 @@ const rememberFocus$1 = ($Viewlet, dom, eventMap, uid = 0) => {
     const isTreeFocused = activeElement?.getAttribute('role') === 'tree';
     const isRootTree = $Viewlet.getAttribute('role') === 'tree' && activeElement === $Viewlet;
     const focused = activeElement?.getAttribute('name') || null;
-    const $Hidden = createHiddenContainer(activeElement, focused);
     if (uid) {
       const numericUid = Number(uid);
       const inputMap = getInputMap($Viewlet);
-      $Viewlet = renderWithUid($Viewlet, dom, eventMap, numericUid, inputMap, focused, $Hidden);
+      $Viewlet = renderWithUid($Viewlet, dom, eventMap, numericUid, inputMap, focused, activeElement);
     }
     if (!uid) {
+      const $Hidden = createHiddenContainer(activeElement, focused);
       renderInto($Viewlet, dom, eventMap);
+      $Hidden.remove();
     }
-    $Hidden.remove();
     restoreFocus($Viewlet, isRootTree, isTreeFocused, focused);
     $Viewlet.style.top = oldTop;
     $Viewlet.style.left = oldLeft;
@@ -8960,6 +8962,13 @@ const focusSelector = (viewletId, selector) => {
     }
   }
 };
+const focusSelectorAfterRender = (viewletId, selector) => {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      focusSelector(viewletId, selector);
+    });
+  });
+};
 
 /**
  * @deprecated
@@ -9336,6 +9345,7 @@ const commandHandlers = {
   'Viewlet.focus': focus$1,
   'Viewlet.focusElementByName': focusElementByName,
   'Viewlet.focusSelector': focusSelector,
+  'Viewlet.focusSelectorAfterRender': focusSelectorAfterRender,
   'Viewlet.handleError': handleError$1,
   'Viewlet.move': move,
   'Viewlet.patchCss': patchCssStyleSheet,
@@ -9619,6 +9629,7 @@ const commandMap = {
   'Viewlet.focus': focus$1,
   'Viewlet.focusElementByName': focusElementByName,
   'Viewlet.focusSelector': focusSelector,
+  'Viewlet.focusSelectorAfterRender': focusSelectorAfterRender,
   'Viewlet.getDragData': getDragData,
   'Viewlet.handleError': handleError$1,
   'Viewlet.invoke': invoke,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/renderer-process",
-  "version": "30.23.0",
+  "version": "30.23.2",
   "keywords": [
     "lvce-editor",
     "renderer-process"