Merge "Replace non-standard event.path with event.composedPath" into stable-3.3

4 files changed, 10 insertions, 9 deletions

diff --git a/polygerrit-ui/app/elements/plugins/gr-event-helper/gr-event-helper.ts b/polygerrit-ui/app/elements/plugins/gr-event-helper/gr-event-helper.ts
index 02fcdec819..5a4d2ae2ad 100644
--- a/polygerrit-ui/app/elements/plugins/gr-event-helper/gr-event-helper.ts
+++ b/polygerrit-ui/app/elements/plugins/gr-event-helper/gr-event-helper.ts
@@ -72,8 +72,9 @@ export class GrEventHelper {
     const capture = options?.capture;
     const event = options?.event || 'click';
     const handler = (e: Event) => {
-      if (!e.path) return;
-      if (e.path.indexOf(this.element) !== -1) {
+      const path = e.composedPath();
+      if (!path) return;
+      if (path.indexOf(this.element) !== -1) {
         let mayContinue = true;
         try {
           mayContinue = callback(e);
diff --git a/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.ts b/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.ts
index 668ea1b57d..45f30f5629 100644
--- a/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.ts
+++ b/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.ts
@@ -450,7 +450,7 @@ export class GrAutocomplete extends KeyboardShortcutMixin(
   }
 
   _handleBodyClick(e: Event) {
-    const eventPath = e.path;
+    const eventPath = e.composedPath();
     if (!eventPath) return;
     for (let i = 0; i < eventPath.length; i++) {
       if (eventPath[i] === this) {
diff --git a/polygerrit-ui/app/utils/dom-util.ts b/polygerrit-ui/app/utils/dom-util.ts
index 11808ac010..c8920b284e 100644
--- a/polygerrit-ui/app/utils/dom-util.ts
+++ b/polygerrit-ui/app/utils/dom-util.ts
@@ -186,7 +186,7 @@ export function querySelectorAll(
 export function getEventPath<T extends PolymerEvent>(e?: T) {
   if (!e) return '';
 
-  let path = e.path;
+  let path = e.composedPath();
   if (!path || !path.length) {
     path = [];
     let el = e.target;
diff --git a/polygerrit-ui/app/utils/dom-util_test.js b/polygerrit-ui/app/utils/dom-util_test.js
index e2d61ed92b..bcb45051ab 100644
--- a/polygerrit-ui/app/utils/dom-util_test.js
+++ b/polygerrit-ui/app/utils/dom-util_test.js
@@ -55,13 +55,13 @@ suite('dom-util tests', () => {
       assert.equal(getEventPath(), '');
       assert.equal(getEventPath(null), '');
       assert.equal(getEventPath(undefined), '');
-      assert.equal(getEventPath({}), '');
+      assert.equal(getEventPath({composedPath: () => []}), '');
     });
 
     test('event with fake path', () => {
-      assert.equal(getEventPath({path: []}), '');
+      assert.equal(getEventPath({composedPath: () => []}), '');
       const dd = document.createElement('dd');
-      assert.equal(getEventPath({path: [dd]}), 'dd');
+      assert.equal(getEventPath({composedPath: () => [dd]}), 'dd');
     });
 
     test('event with fake complicated path', () => {
@@ -72,7 +72,7 @@ suite('dom-util tests', () => {
       divNode.id = 'test2';
       divNode.className = 'a b c';
       assert.equal(getEventPath(
-          {path: [dd, divNode]}),
+          {composedPath: () => [dd, divNode]}),
       'div#test2.a.b.c>dd#test.a.b'
       );
     });
@@ -88,7 +88,7 @@ suite('dom-util tests', () => {
       const fakeTarget = document.createElement('SPAN');
       fakeTargetParent1.appendChild(fakeTarget);
       assert.equal(
-          getEventPath({target: fakeTarget}),
+          getEventPath({composedPath: () => {}, target: fakeTarget}),
           'div#test2.a.b.c>dd#test.a.b>span'
       );
     });