From eba617f53f9be3a1b933b56a3d9c0a9cba8b9e83 Mon Sep 17 00:00:00 2001
From: Sampath <v-smokireddy@microsoft.com>
Date: Tue, 2 Jan 2024 22:34:56 +0530
Subject: [PATCH] focus management has been done for the save query and close
 button of dialog

---
 .../Panes/PanelContainerComponent.tsx         | 35 +++++++++++++++++++
 .../Tabs/QueryTab/QueryTabComponent.tsx       |  2 ++
 2 files changed, 37 insertions(+)

diff --git a/src/Explorer/Panes/PanelContainerComponent.tsx b/src/Explorer/Panes/PanelContainerComponent.tsx
index 4ddc59033..fba9ffcb2 100644
--- a/src/Explorer/Panes/PanelContainerComponent.tsx
+++ b/src/Explorer/Panes/PanelContainerComponent.tsx
@@ -76,7 +76,42 @@ export class PanelContainerComponent extends React.Component<PanelContainerProps
     );
   }
 
+  public isFocusable(element: HTMLElement) {
+    return (
+      element.tabIndex >= 0 ||
+      (element instanceof HTMLAnchorElement && element.href) ||
+      (element instanceof HTMLAreaElement && element.href) ||
+      (element instanceof HTMLInputElement && !element.disabled) ||
+      (element instanceof HTMLSelectElement && !element.disabled) ||
+      (element instanceof HTMLTextAreaElement && !element.disabled) ||
+      (element instanceof HTMLButtonElement && !element.disabled)
+    );
+  }
+  private findFocusableParent = (element: HTMLElement) => {
+    while (element) {
+      if (this.isFocusable(element)) {
+        return element;
+      }
+      element = element.parentNode as HTMLElement;
+    }
+    return null;
+  };
+
   private onDissmiss = (ev?: KeyboardEvent | React.SyntheticEvent<HTMLElement>): void => {
+    let elementIdToFocus = sessionStorage.getItem("focusedElementId") || null;
+    if (elementIdToFocus) {
+      let targetElement = document.getElementById(elementIdToFocus);
+
+      if (targetElement) {
+        let focusableParent = this.findFocusableParent(targetElement);
+        if (focusableParent) {
+          setTimeout(() => {
+            focusableParent.focus();
+          }, 100);
+          sessionStorage.removeItem("focusedElementId");
+        }
+      }
+    }
     if (ev && (ev.target as HTMLElement).id === "notificationConsoleHeader") {
       ev.preventDefault();
     } else {
diff --git a/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx b/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx
index f78ada849..f2533877d 100644
--- a/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx
+++ b/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx
@@ -224,6 +224,7 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
   };
 
   public onSaveQueryClick = (): void => {
+    sessionStorage.setItem("focusedElementId", "savequery");
     useSidePanel.getState().openSidePanel("Save Query", <SaveQueryPane explorer={this.props.collection.container} />);
   };
 
@@ -394,6 +395,7 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
       const label = "Save Query";
       buttons.push({
         iconSrc: SaveQueryIcon,
+        id: "savequery",
         iconAlt: label,
         onCommandClick: this.onSaveQueryClick,
         commandButtonLabel: label,