Merge pull request #144 from irontec/CDT-215-prevent-tab-event-propag…

…ation-on-dialogs Prevented tab propagation from Dialogs
irontec · Nov 27, 2024 · a5fc2e8 · a5fc2e8
2 parents 650d434 + 96c8249
commit a5fc2e8
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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'
     >