Fix interoperability issue regarding Event properties (#36386)

* Fix interoperability issue regarding Event properties

- make possible to re-set read-only event properties
- use hydrateObj() to set delegateTarget property

Fixes #36207

Co-authored-by: GeoSot <geo.sotis@gmail.com>
Co-authored-by: Julien Déramond <julien.deramond@orange.com>

2 files changed, 49 insertions, 7 deletions

diff --git a/js/src/dom/event-handler.js b/js/src/dom/event-handler.js
index 87f936b41d..0aa628c66d 100644
--- a/js/src/dom/event-handler.js
+++ b/js/src/dom/event-handler.js
@@ -89,7 +89,7 @@ function getElementEvents(element) {
 
 function bootstrapHandler(element, fn) {
   return function handler(event) {
-    event.delegateTarget = element
+    hydrateObj(event, { delegateTarget: element })
 
     if (handler.oneOff) {
       EventHandler.off(element, event.type, fn)
@@ -109,7 +109,7 @@ function bootstrapDelegationHandler(element, selector, fn) {
           continue
         }
 
-        event.delegateTarget = target
+        hydrateObj(event, { delegateTarget: target })
 
         if (handler.oneOff) {
           EventHandler.off(element, event.type, selector, fn)
@@ -302,11 +302,16 @@ const EventHandler = {
 
 function hydrateObj(obj, meta) {
   for (const [key, value] of Object.entries(meta || {})) {
-    Object.defineProperty(obj, key, {
-      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 14037929bc..19d0235e6c 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 = [
+          '<div id="div1">',
+          '   <div id="div2"></div>',
+          '   <div id="div3"></div>',
+          '</div>'
+        ].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)
+      })
+    })
+  })
 })