From a3bd126a21d52e3299df20cf14e7203a51d15a59 Mon Sep 17 00:00:00 2001
From: MokireddySampath <120497218+MokireddySampath@users.noreply.github.com>
Date: Wed, 27 Sep 2023 20:46:26 +0530
Subject: [PATCH] Dialog box of azure synapse closes on pressing escape button
 (#1543)

---
 src/Explorer/Controls/Dialog.tsx | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/Explorer/Controls/Dialog.tsx b/src/Explorer/Controls/Dialog.tsx
index f8f716006..33971b21e 100644
--- a/src/Explorer/Controls/Dialog.tsx
+++ b/src/Explorer/Controls/Dialog.tsx
@@ -1,9 +1,9 @@
 import {
   ChoiceGroup,
   DefaultButton,
-  Dialog as FluentDialog,
   DialogFooter,
   DialogType,
+  Dialog as FluentDialog,
   FontIcon,
   IButtonProps,
   IChoiceGroupProps,
@@ -15,7 +15,7 @@ import {
   ProgressIndicator,
   TextField,
 } from "@fluentui/react";
-import React, { FC } from "react";
+import React, { FC, useEffect } from "react";
 import create, { UseStore } from "zustand";
 
 export interface DialogState {
@@ -157,6 +157,20 @@ export const Dialog: FC = () => {
     contentHtml,
   } = props || {};
 
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key === "Escape") {
+      useDialog.getState().closeDialog();
+    }
+  };
+
+  useEffect(() => {
+    if (visible) {
+      document.addEventListener("keydown", handleKeyDown);
+    } else {
+      document.removeEventListener("keydown", handleKeyDown);
+    }
+  }, [visible]);
+
   const dialogProps: IDialogProps = {
     hidden: !visible,
     dialogContentProps: {