Fix native blur event preventing (fixes DevExpress#1275) (DevExpress#…

…1276) * Fix native blur event preventing (fixes DevExpress#1275) * Update the test
kirovboris · Dec 18, 2019 · 034c657 · 034c657
1 parent 3495943
commit 034c657
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -91,7 +91,7 @@
     "stack-chain": "^1.3.6",
     "strip-bom": "^2.0.0",
     "testcafe-browser-tools": "1.2.0",
-    "testcafe-hammerhead": "10.4.0",
+    "testcafe-hammerhead": "10.5.0",
     "testcafe-legacy-api": "2.0.1",
     "testcafe-reporter-json": "^2.1.0",
     "testcafe-reporter-list": "^2.1.0",

diff --git a/src/client/core/prevent-real-events.js b/src/client/core/prevent-real-events.js
@@ -1,4 +1,4 @@
-import { utils, eventSandbox, nativeMethods } from './deps/hammerhead';
+import { utils, eventSandbox } from './deps/hammerhead';
 
 import { get, hasDimensions } from './utils/style';
 import { filter } from './utils/array';
@@ -52,10 +52,12 @@ function preventRealEventHandler (e, dispatched, preventDefault, cancelHandlers,
                 }
 
                 if (isElementInvisible || invisibleParents.length) {
-                    // NOTE: B254768 - reason of setTimeout method using.
-                    nativeMethods.setTimeout.call(window, () => {
+                    // NOTE: In IE we should prevent the event and raise it on timeout. This is a fix for
+                    // the case when a focus event leads to the element disappearing. If we don't prevent
+                    // the blur event it will be raised before the previous focus event is raised (see B254768)
+                    eventSandbox.timers.deferFunction(() => {
                         eventSimulator.blur(target);
-                    }, 0);
+                    });
                 }
             }
             // NOTE: fix for a jQuery bug. An exception is raised when calling .is(':visible')

diff --git a/test/functional/fixtures/regression/gh-1275/pages/index.html b/test/functional/fixtures/regression/gh-1275/pages/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>GH-1275</title>
+</head>
+<body>
+<input id="input1"/>
+<input id="input2"/>
+
+<script>
+    window.focus();
+
+    var input1 = document.getElementById('input1');
+    var input2 = document.getElementById('input2');
+
+    input1.addEventListener('keydown', function () {
+        input1.style.display = 'none';
+
+        window.setTimeout(function () {
+            input2.focus();
+        });
+    });
+
+    input1.addEventListener('blur', function (e) {
+        if (e.srcElement.tagName && e.srcElement.tagName.toLowerCase() === 'input')
+            document.activeElement.blur();
+    });
+
+</script>
+
+</body>
+</html>
diff --git a/test/functional/fixtures/regression/gh-1275/test.js b/test/functional/fixtures/regression/gh-1275/test.js
@@ -0,0 +1,5 @@
+describe('[Regression](GH-1275)', function () {
+    it('Blur event should not raise too late when an input became hidden in IE', function () {
+        return runTests('testcafe-fixtures/index-test.js', 'Hide input on blur', { only: ['ie'] });
+    });
+});
diff --git a/test/functional/fixtures/regression/gh-1275/testcafe-fixtures/index-test.js b/test/functional/fixtures/regression/gh-1275/testcafe-fixtures/index-test.js
@@ -0,0 +1,12 @@
+import { Selector } from 'testcafe';
+
+fixture `gh-1275`
+    .page `http://localhost:3000/fixtures/regression/gh-1275/pages/index.html`;
+
+test('Hide input on blur', async t => {
+    await t
+        .click('#input1')
+        .pressKey('tab')
+        .pressKey('a b c')
+        .expect(Selector('#input2').value).eql('abc');
+});