diff --git a/web/app.js b/web/app.js index 6b8f41f1b..fa9070834 100644 --- a/web/app.js +++ b/web/app.js @@ -19,6 +19,7 @@ import { AutoPrintRegExp, DEFAULT_SCALE_VALUE, EventBus, + getActiveOrFocusedElement, getPDFFileNameFromURL, isValidRotation, isValidScrollMode, @@ -2829,7 +2830,7 @@ function webViewerKeyDown(evt) { // Some shortcuts should not get handled if a control/input element // is selected. - const curElement = document.activeElement || document.querySelector(":focus"); + const curElement = getActiveOrFocusedElement(); const curElementTagName = curElement && curElement.tagName.toUpperCase(); if ( curElementTagName === "INPUT" || diff --git a/web/ui_utils.js b/web/ui_utils.js index 8929b33dc..6faa50b8e 100644 --- a/web/ui_utils.js +++ b/web/ui_utils.js @@ -985,6 +985,28 @@ function moveToEndOfArray(arr, condition) { } } +/** + * Get the active or focused element in current DOM. + * + * Recursively search for the truly active or focused element in case there are + * shadow DOMs. + * + * @returns {Element} the truly active or focused element. + */ +function getActiveOrFocusedElement() { + let curRoot = document; + let curActiveOrFocused = + curRoot.activeElement || curRoot.querySelector(":focus"); + + while (curActiveOrFocused && curActiveOrFocused.shadowRoot) { + curRoot = curActiveOrFocused.shadowRoot; + curActiveOrFocused = + curRoot.activeElement || curRoot.querySelector(":focus"); + } + + return curActiveOrFocused; +} + export { AutoPrintRegExp, CSS_UNITS, @@ -1026,4 +1048,5 @@ export { WaitOnType, waitOnEventOrTimeout, moveToEndOfArray, + getActiveOrFocusedElement, };