chore: Turn focusSplitPanel into async function (wait for an element before focusing on it)

Author: georgylobko

src/app-layout/__tests__/__snapshots__/widget-contract-split-panel.test.tsx.snap

@@ -177,6 +177,13 @@ Map {
         "splitPanelControlId": "split-panel33",
         "splitPanelFocusControl": {
           "refs": {
+            "focusPromise": {
+              "_promise": Promise {},
+              "_reject": [Function],
+              "_resolve": [Function],
+              "reject": [Function],
+              "resolve": [Function],
+            },
             "onMount": [Function],
             "preferences": {
               "current": null,
@@ -247,6 +254,13 @@ Map {
         "onToggle": [Function],
         "position": "bottom",
         "refs": {
+          "focusPromise": {
+            "_promise": Promise {},
+            "_reject": [Function],
+            "_resolve": [Function],
+            "reject": [Function],
+            "resolve": [Function],
+          },
           "onMount": [Function],
           "preferences": {
             "current": null,
@@ -477,6 +491,13 @@ Map {
         "splitPanelControlId": "split-panel33",
         "splitPanelFocusControl": {
           "refs": {
+            "focusPromise": {
+              "_promise": Promise {},
+              "_reject": [Function],
+              "_resolve": [Function],
+              "reject": [Function],
+              "resolve": [Function],
+            },
             "onMount": [Function],
             "preferences": {
               "current": null,
@@ -547,6 +568,13 @@ Map {
         "onToggle": [Function],
         "position": "bottom",
         "refs": {
+          "focusPromise": {
+            "_promise": Promise {},
+            "_reject": [Function],
+            "_resolve": [Function],
+            "reject": [Function],
+            "resolve": [Function],
+          },
           "onMount": [Function],
           "preferences": {
             "current": null,
@@ -777,6 +805,13 @@ Map {
         "splitPanelControlId": "split-panel33",
         "splitPanelFocusControl": {
           "refs": {
+            "focusPromise": {
+              "_promise": Promise {},
+              "_reject": [Function],
+              "_resolve": [Function],
+              "reject": [Function],
+              "resolve": [Function],
+            },
             "onMount": [Function],
             "preferences": {
               "current": null,
@@ -847,6 +882,13 @@ Map {
         "onToggle": [Function],
         "position": "bottom",
         "refs": {
+          "focusPromise": {
+            "_promise": Promise {},
+            "_reject": [Function],
+            "_resolve": [Function],
+            "reject": [Function],
+            "resolve": [Function],
+          },
           "onMount": [Function],
           "preferences": {
             "current": null,
@@ -1077,6 +1119,13 @@ Map {
         "splitPanelControlId": "split-panel33",
         "splitPanelFocusControl": {
           "refs": {
+            "focusPromise": {
+              "_promise": Promise {},
+              "_reject": [Function],
+              "_resolve": [Function],
+              "reject": [Function],
+              "resolve": [Function],
+            },
             "onMount": [Function],
             "preferences": {
               "current": null,
@@ -1147,6 +1196,13 @@ Map {
         "onToggle": [Function],
         "position": "bottom",
         "refs": {
+          "focusPromise": {
+            "_promise": Promise {},
+            "_reject": [Function],
+            "_resolve": [Function],
+            "reject": [Function],
+            "resolve": [Function],
+          },
           "onMount": [Function],
           "preferences": {
             "current": null,

src/app-layout/utils/use-split-panel-focus-control.ts

@@ -11,6 +11,7 @@ export interface SplitPanelFocusControlRefs {
   toggle: RefObject<Focusable>;
   slider: RefObject<HTMLDivElement>;
   preferences: RefObject<Focusable>;
+  focusPromise?: Deferred<HTMLElement>;
   onMount: () => void;
 }
 export interface SplitPanelFocusControlState {
@@ -25,6 +26,7 @@ export function useSplitPanelFocusControl(dependencies: DependencyList): SplitPa
     toggle: useRef<Focusable>(null),
     slider: useRef<HTMLDivElement>(null),
     preferences: useRef<Focusable>(null),
+    focusPromise: focusPromise.current,
     onMount: () => {
       focusPromise.current.resolve();
     },

src/app-layout/visual-refresh-toolbar/use-app-layout.tsx

@@ -212,7 +212,11 @@ export const useAppLayout = (props: AppLayoutInternalProps, forwardRef: Forwarde
     openTools: () => onToolsToggle(true),
     focusToolsClose: () => drawersFocusControl.setFocus(true),
     focusActiveDrawer: () => drawersFocusControl.setFocus(true),
-    focusSplitPanel: () => splitPanelFocusControl.refs.slider.current?.focus(),
+    focusSplitPanel: () => {
+      splitPanelFocusControl.refs.focusPromise?.promise.then(() => {
+        splitPanelFocusControl.refs.slider.current?.focus();
+      });
+    },
     focusNavigation: () => navigationFocusControl.setFocus(true),
   }));