diff --git a/components/lib/dialog/Dialog.js b/components/lib/dialog/Dialog.js index 679be9386c..acdb3136d9 100644 --- a/components/lib/dialog/Dialog.js +++ b/components/lib/dialog/Dialog.js @@ -66,37 +66,40 @@ export const Dialog = React.forwardRef((props, ref) => { }; const onKeyDown = (event) => { - let currentTarget = event.currentTarget; - - if (currentTarget && currentTarget.primeDialogParams) { - let params = currentTarget.primeDialogParams; - let paramLength = params.length; - let dialogId = params[paramLength - 1] ? params[paramLength - 1].id : undefined; - - if (dialogId === idState && props.closeOnEscape) { - let dialog = document.getElementById(dialogId); - - if (event.which === 27) { - onClose(event); - event.stopImmediatePropagation(); - - params.splice(paramLength - 1, 1); - } else if (event.which === 9) { - event.preventDefault(); - let focusableElements = DomHandler.getFocusableElements(dialog); - if (focusableElements && focusableElements.length > 0) { - if (!document.activeElement) { - focusableElements[0].focus(); - } else { - let focusedIndex = focusableElements.indexOf(document.activeElement); - if (event.shiftKey) { - if (focusedIndex === -1 || focusedIndex === 0) focusableElements[focusableElements.length - 1].focus(); - else focusableElements[focusedIndex - 1].focus(); - } else { - if (focusedIndex === -1 || focusedIndex === focusableElements.length - 1) focusableElements[0].focus(); - else focusableElements[focusedIndex + 1].focus(); - } - } + const currentTarget = event.currentTarget; + + if (!currentTarget || !currentTarget.primeDialogParams) { + return; + } + + const params = currentTarget.primeDialogParams; + const paramLength = params.length; + const dialogId = params[paramLength - 1] ? params[paramLength - 1].id : undefined; + + if (dialogId !== idState) { + return; + } + + const dialog = document.getElementById(dialogId); + + if (props.closable && props.closeOnEscape && event.key === 'Escape') { + onClose(event); + event.stopImmediatePropagation(); + params.splice(paramLength - 1, 1); + } else if (event.key === 'Tab') { + event.preventDefault(); + const focusableElements = DomHandler.getFocusableElements(dialog); + if (focusableElements && focusableElements.length > 0) { + if (!document.activeElement) { + focusableElements[0].focus(); + } else { + const focusedIndex = focusableElements.indexOf(document.activeElement); + if (event.shiftKey) { + if (focusedIndex === -1 || focusedIndex === 0) focusableElements[focusableElements.length - 1].focus(); + else focusableElements[focusedIndex - 1].focus(); + } else { + if (focusedIndex === -1 || focusedIndex === focusableElements.length - 1) focusableElements[0].focus(); + else focusableElements[focusedIndex + 1].focus(); } } } @@ -304,12 +307,9 @@ export const Dialog = React.forwardRef((props, ref) => { bindDocumentResizeEndListener(); } - if (props.closable) { - bindDocumentKeyDownListener(); - - const newParam = { id: idState, hasBlockScroll: props.blockScroll }; - document.primeDialogParams = document.primeDialogParams ? [...document.primeDialogParams, newParam] : [newParam]; - } + bindDocumentKeyDownListener(); + const newParam = { id: idState, hasBlockScroll: props.blockScroll }; + document.primeDialogParams = document.primeDialogParams ? [...document.primeDialogParams, newParam] : [newParam]; }; const unbindGlobalListeners = () => {