Merge pull request #319 from AndreyBelym/bubbling-events

Make some simulated events bubble (closes #318)
DevExpress · Dec 10, 2015 · e08125e · e08125e
2 parents d275ab0 + 2cad2ca
commit e08125e
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 14 deletions.
diff --git a/src/client/sandbox/event/simulator.js b/src/client/sandbox/event/simulator.js
@@ -368,16 +368,13 @@ export default class EventSimulator {
         return this._raiseDispatchEvent(el, ev, args);
     }
 
-    _dispatchEvent (el, name, flag) {
+    _dispatchEvent (el, name, shouldBubble, flag) {
         var ev = null;
 
         if (document.createEvent) {
             ev = document.createEvent('Events');
 
-            // NOTE: The dispatchEvent function is used for events, which are raised for a certain element and aren’t
-            // raised for parent elements (focus, blur, change, input, submit). So, we set the 'bubbling' (the second)
-            // argument to false (T229732).
-            ev.initEvent(name, false, true);
+            ev.initEvent(name, shouldBubble, true);
 
             if (flag)
                 ev[flag] = true;
@@ -598,29 +595,31 @@ export default class EventSimulator {
         return this._simulateEvent(el, 'keydown', options);
     }
 
-    input (el) {
-        return this._dispatchEvent(el, 'input');
-    }
-
     // NOTE: Control events.
+    // NOTE: "focus", "blur" and "selectionchange" shouldn't bubble (T229732),
+    // but "input", "change" and "submit" should do it (GH-318).
     blur (el) {
-        return this._dispatchEvent(el, 'blur', this.DISPATCHED_EVENT_FLAG);
+        return this._dispatchEvent(el, 'blur', false, this.DISPATCHED_EVENT_FLAG);
     }
 
     focus (el) {
-        return this._dispatchEvent(el, 'focus', this.DISPATCHED_EVENT_FLAG);
+        return this._dispatchEvent(el, 'focus', false, this.DISPATCHED_EVENT_FLAG);
     }
 
     change (el) {
-        return this._dispatchEvent(el, 'change', this.DISPATCHED_EVENT_FLAG);
+        return this._dispatchEvent(el, 'change', true, this.DISPATCHED_EVENT_FLAG);
+    }
+
+    input (el) {
+        return this._dispatchEvent(el, 'input', true);
     }
 
     submit (el) {
-        return this._dispatchEvent(el, 'submit');
+        return this._dispatchEvent(el, 'submit', true);
     }
 
     selectionchange (el) {
-        return this._dispatchEvent(el, 'selectionchange');
+        return this._dispatchEvent(el, 'selectionchange', false);
     }
 
     // NOTE: Touch events.

diff --git a/test/client/fixtures/sandbox/event/event-simulator-test.js b/test/client/fixtures/sandbox/event/event-simulator-test.js
@@ -353,4 +353,47 @@ if (!browserUtils.isFirefox) {
             });
         document.body.appendChild(iframe);
     });
+
+    test('"submit","input" and "change" should bubble; "focus", "blur", "selectionchange" should not (GH-318)', function () {
+        var $input = $('<input>')
+            .appendTo('body');
+
+        var $form = $('<form>')
+            .appendTo('body');
+
+        var firedEvents = {};
+
+        var eventTypes = ['focus', 'blur', 'input', 'change', 'selectionchange', 'submit'];
+
+        function eventHandler (e) {
+            firedEvents[e.type] = true;
+        }
+
+        function getEventTarget (eventType) {
+            if (eventType === 'submit')
+                return $form[0];
+
+            if (eventType === 'selectionchange')
+                return window.document;
+
+            return $input[0];
+        }
+
+        eventTypes.forEach(function (eventType) {
+            window.addEventListener(eventType, eventHandler);
+
+            eventSimulator[eventType](getEventTarget(eventType));
+
+            window.removeEventListener(eventType, eventHandler);
+        });
+
+        $input.remove();
+        $form.remove();
+
+        deepEqual(firedEvents, {
+            input:  true,
+            change: true,
+            submit: true
+        });
+    });
 }