From 89671a88598916b4955063124adf081a01ff96c3 Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Tue, 1 Aug 2023 23:21:58 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(App.tsx):=20add=20support=20?=
 =?UTF-8?q?for=20preventing=20control+backspace=20event=20on=20the=20appli?=
 =?UTF-8?q?cation=20to=20improve=20user=20experience?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/src/App.tsx | 36 +++++++++++++++++++++++++++---------
 1 file changed, 27 insertions(+), 9 deletions(-)

diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx
index f6d7b2e46..bd65f18cb 100644
--- a/src/frontend/src/App.tsx
+++ b/src/frontend/src/App.tsx
@@ -1,5 +1,5 @@
 import _ from "lodash";
-import { useContext, useEffect, useState } from "react";
+import { useContext, useEffect, useRef, useState } from "react";
 import { useLocation } from "react-router-dom";
 import "reactflow/dist/style.css";
 import "./App.css";
@@ -121,17 +121,35 @@ export default function App() {
     );
   };
 
-  const handleKeyPress = (e: KeyboardEvent) => {
-    if (e.ctrlKey && e.key === "Backspace") {
-      e.preventDefault();
-      e.stopPropagation();
-    }
-  };
 
+  //Prevent the control+backspace event on the application
+  const onKeyDownRef = useRef(false);
   useEffect(() => {
-    document.addEventListener('keydown', handleKeyPress);
+    const handleKeyDownCapture = (event) => {
+      
+      if(event.key === "Backspace" && event.ctrlKey === true) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+      onKeyDownRef.current = true;
+    };
+
+    const handleKeyUpCapture = (event) => {
+      if (onKeyDownRef.current) {
+        if(event.key === "Backspace" && event.ctrlKey === true) {
+          event.preventDefault();
+          event.stopPropagation();
+        }
+        onKeyDownRef.current = false;
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDownCapture, true); 
+    document.addEventListener('keyup', handleKeyUpCapture, true);
+
     return () => {
-      document.removeEventListener('keydown', handleKeyPress);
+      document.removeEventListener('keydown', handleKeyDownCapture, true);
+      document.removeEventListener('keyup', handleKeyUpCapture, true);
     };
   }, []);