Get activeElement from Shadow DOM (#1061)

* Get activeElement from Shadow DOM * Remove isDomElement check; add a test
DevExpress · Mar 17, 2017 · 6ace2b9 · 6ace2b9
1 parent 6fa2485
commit 6ace2b9
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 1 deletion.
diff --git a/src/client/utils/dom.js b/src/client/utils/dom.js
@@ -110,7 +110,18 @@ export function getActiveElement (currentDocument) {
     // https://github.com/DevExpress/testcafe-hammerhead/issues/768
     var doc = currentDocument || document;
 
-    return isDomElement(doc.activeElement) ? doc.activeElement : doc.body;
+    var el = isDomElement(doc.activeElement) ? doc.activeElement : doc.body;
+
+    while (el && el.shadowRoot) {
+        var shadowEl = el.shadowRoot.activeElement;
+
+        if (!shadowEl)
+            break;
+
+        el = shadowEl;
+    }
+
+    return el;
 }
 
 export function getChildVisibleIndex (select, child) {

diff --git a/test/client/fixtures/utils/dom-test.js b/test/client/fixtures/utils/dom-test.js
@@ -813,3 +813,39 @@ test('inspect html elements', function () {
     ok(domUtils.isTableElement(nativeMethods.createElement.call(document, 'table')), 'table');
     ok(domUtils.isTableDataCellElement(nativeMethods.createElement.call(document, 'td')), 'td');
 });
+
+if (browserUtils.isChrome) {
+    test('should return active element inside shadow DOM', function () {
+        var host  = document.createElement('div');
+        var root  = host.createShadowRoot();
+        var input = document.createElement('input');
+
+        document.body.appendChild(host);
+        root.appendChild(input);
+
+        nativeMethods.focus.call(input);
+
+        strictEqual(domUtils.getActiveElement(), input);
+
+        document.body.removeChild(host);
+    });
+
+    test('should return active element inside nested shadow DOM', function () {
+        var hostParent = document.createElement('div');
+        var hostChild  = document.createElement('div');
+        var rootParent = hostParent.createShadowRoot();
+        var rootChild  = hostChild.createShadowRoot();
+        var input      = document.createElement('input');
+
+        document.body.appendChild(hostParent);
+        rootParent.appendChild(hostChild);
+        rootChild.appendChild(input);
+
+        nativeMethods.focus.call(input);
+
+        strictEqual(domUtils.getActiveElement(), input);
+
+        document.body.removeChild(hostParent);
+    });
+}
+