From add6dca7895ceb8e5b7a9f747e5462b223de3402 Mon Sep 17 00:00:00 2001 From: Dhruv Srivastava Date: Fri, 27 Nov 2020 08:34:31 +0100 Subject: Replace non-standard event.path with event.composedPath event.path is a non-standard property supported by Chrome but not supported by Firefox/edge. https://caniuse.com/?search=composedPath shows support on all major browsers. The fix has been released with Gerrit 3.4.0 but affects 3.3 as well. (cherry picked from commit f5c633a6ea7c657177f434d9a3eadfa8e2c9199e) Issue: Bug 13745 Issue: Bug 14173 Change-Id: Id49a528b52c554093f071c4d538fa97610c66410 --- .../app/elements/plugins/gr-event-helper/gr-event-helper.ts | 5 +++-- .../app/elements/shared/gr-autocomplete/gr-autocomplete.ts | 2 +- polygerrit-ui/app/utils/dom-util.ts | 2 +- polygerrit-ui/app/utils/dom-util_test.js | 10 +++++----- 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(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' ); }); -- cgit v1.2.3