From 96c824924f42cc9942b4c4010e1b14c9016ac16f Mon Sep 17 00:00:00 2001
From: Roger Batista <rbatista@irontec.com>
Date: Thu, 21 Nov 2024 13:13:09 +0100
Subject: [PATCH] Prevented tab propagation from Dialogs

---
 library/package.json                                | 2 +-
 library/src/components/shared/ConfirmDialog.tsx     | 7 +++++++
 library/src/components/shared/ConfirmEditDialog.tsx | 7 +++++++
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/library/package.json b/library/package.json
index f0baedc9..fd789116 100644
--- a/library/package.json
+++ b/library/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@irontec/ivoz-ui",
-  "version": "1.7.0",
+  "version": "1.7.1",
   "description": "UI library used in ivozprovider",
   "license": "GPL-3.0",
   "main": "index.js",
diff --git a/library/src/components/shared/ConfirmDialog.tsx b/library/src/components/shared/ConfirmDialog.tsx
index 48c87473..f3fbc37d 100644
--- a/library/src/components/shared/ConfirmDialog.tsx
+++ b/library/src/components/shared/ConfirmDialog.tsx
@@ -53,6 +53,12 @@ export default function ConfirmDialog(props: ConfirmDialogProps): JSX.Element {
     []
   );
 
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === 'Tab') {
+      event.stopPropagation();
+    }
+  };
+
   const sumbitEnabled = !doubleCheck || inputVal == doubleCheckExpectedStr;
 
   return (
@@ -63,6 +69,7 @@ export default function ConfirmDialog(props: ConfirmDialogProps): JSX.Element {
       onClose={handleClose}
       aria-labelledby='alert-dialog-slide-title'
       aria-describedby='alert-dialog-slide-description'
+      onKeyDown={handleKeyDown}
     >
       <CloseRoundedIcon className='close-icon' onClick={handleClose} />
       <img src='assets/img/delete-dialog.svg' className='modal-icon' />
diff --git a/library/src/components/shared/ConfirmEditDialog.tsx b/library/src/components/shared/ConfirmEditDialog.tsx
index 493c7fac..52856d94 100644
--- a/library/src/components/shared/ConfirmEditDialog.tsx
+++ b/library/src/components/shared/ConfirmEditDialog.tsx
@@ -36,6 +36,12 @@ export const ConfirmEditionDialog = (props: ConfirmEditDialogProps) => {
   const TOTAL_TIME = 100;
   const [progress, setProgress] = useState(TOTAL_TIME);
 
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === 'Tab') {
+      event.stopPropagation();
+    }
+  };
+
   useEffect(() => {
     let timer: NodeJS.Timeout | null = null;
     if (open) {
@@ -64,6 +70,7 @@ export const ConfirmEditionDialog = (props: ConfirmEditDialogProps) => {
       TransitionComponent={Transition}
       keepMounted
       onClose={handleClose}
+      onKeyDown={handleKeyDown}
       aria-labelledby='alert-dialog-slide-title'
       aria-describedby='alert-dialog-slide-description'
     >