From 252e258a590513590b564b8b2a889e27a9004f7c Mon Sep 17 00:00:00 2001
From: Nicky Chen <chenjinlong2016@outlook.com>
Date: Wed, 23 Sep 2020 12:59:19 +0800
Subject: [PATCH] Fixed keydown event handling problem with shadow DOM.
 Editable elements in shadow DOMs can not be detected in old version.

---
 web/app.js      |  3 ++-
 web/ui_utils.js | 23 +++++++++++++++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/web/app.js b/web/app.js
index 6fd9d6d9f..f761c62b9 100644
--- a/web/app.js
+++ b/web/app.js
@@ -19,6 +19,7 @@ import {
   AutoPrintRegExp,
   DEFAULT_SCALE_VALUE,
   EventBus,
+  getActiveOrFocusedElement,
   getPDFFileNameFromURL,
   isValidRotation,
   isValidScrollMode,
@@ -2819,7 +2820,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,
 };