From d8b7f4150f910c00063c155e3e5940412692d589 Mon Sep 17 00:00:00 2001
From: Janmejay Chatterjee <70024430+NotTheRightGuy@users.noreply.github.com>
Date: Mon, 30 Oct 2023 09:04:34 +0530
Subject: [PATCH] [HF23-AB]Enter to Delete | Closes #7711 (#7850)

* Enter to Delete | Closes #7711

* Added Callback function to handle delete button

* Wrapped handleDeleteConfirm in a callback function

* Used React.useCallback() instead of useCallback()

Fixed function typo
---
 frontend/src/Editor/Inspector/Inspector.jsx | 26 +++++++++++++++++----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/frontend/src/Editor/Inspector/Inspector.jsx b/frontend/src/Editor/Inspector/Inspector.jsx
index b96c93d7f1..c6f691f619 100644
--- a/frontend/src/Editor/Inspector/Inspector.jsx
+++ b/frontend/src/Editor/Inspector/Inspector.jsx
@@ -382,15 +382,31 @@ export const Inspector = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [JSON.stringify({ showHeaderActionsMenu })]);
 
+  const handleDeleteConfirm = React.useCallback(() => {
+    switchSidebarTab(2);
+    removeComponent(component);
+    setWidgetDeleteConfirmation(false);
+  }, [switchSidebarTab, removeComponent, component, setWidgetDeleteConfirmation]);
+
+  React.useEffect(()=>{
+    const handleKeyPress = (event) => {
+        if (showWidgetDeleteConfirmation && event.key === 'Enter') {
+            handleDeleteConfirm();
+        }
+    };
+
+    document.addEventListener('keydown', handleKeyPress);
+    return () => {
+        document.removeEventListener('keydown', handleKeyPress);
+    };
+  }, [showWidgetDeleteConfirmation, handleDeleteConfirm]);
+  
   return (
     <div className="inspector">
       <ConfirmDialog
         show={showWidgetDeleteConfirmation}
-        message={'Component will be deleted, do you want to continue?'}
-        onConfirm={() => {
-          switchSidebarTab(2);
-          removeComponent(component);
-        }}
+        message={'Widget will be deleted, do you want to continue?'}
+        onConfirm={handleDeleteConfirm}
         onCancel={() => setWidgetDeleteConfirmation(false)}
         darkMode={darkMode}
       />