diff --git a/js/src/dom/event-handler.js b/js/src/dom/event-handler.js index d2b452b7b261..0aa628c66dbd 100644 --- a/js/src/dom/event-handler.js +++ b/js/src/dom/event-handler.js @@ -302,12 +302,16 @@ const EventHandler = { function hydrateObj(obj, meta) { for (const [key, value] of Object.entries(meta || {})) { - Object.defineProperty(obj, key, { - configurable: true, - get() { - return value - } - }) + try { + obj[key] = value + } catch { + Object.defineProperty(obj, key, { + configurable: true, + get() { + return value + } + }) + } } return obj diff --git a/js/tests/unit/dom/event-handler.spec.js b/js/tests/unit/dom/event-handler.spec.js index 14037929bca9..19d0235e6cbf 100644 --- a/js/tests/unit/dom/event-handler.spec.js +++ b/js/tests/unit/dom/event-handler.spec.js @@ -441,4 +441,41 @@ describe('EventHandler', () => { expect(i).toEqual(5) }) }) + + describe('general functionality', () => { + it('should hydrate properties, and make them configurable', () => { + return new Promise(resolve => { + fixtureEl.innerHTML = [ + '
', + '
', + '
', + '
' + ].join('') + + const div1 = fixtureEl.querySelector('#div1') + const div2 = fixtureEl.querySelector('#div2') + const div3 = fixtureEl.querySelector('#div3') + + EventHandler.on(div1, 'click', event => { + event.originalTarget = div3 + + expect(event.currentTarget).toBe(div2) + + Object.defineProperty(event, 'currentTarget', { + configurable: true, + get() { + return div1 + } + }) + + expect(event.currentTarget).toBe(div1) + resolve() + }) + + expect(() => { + EventHandler.trigger(div1, 'click', { delegateTarget: div2, originalTarget: null, currentTarget: div2 }) + }).not.toThrowError(TypeError) + }) + }) + }) })