fix: iFrame input focus should not cause blur if input already activeElement (#8112)

Co-authored-by: Chris Breiding <[email protected]>
Co-authored-by: Jennifer Shehane <[email protected]>

Author: 3 people

packages/driver/src/cy/focused.js

@@ -89,9 +89,12 @@ const create = (state) => {
 
     const win = $window.getWindowByElement(el)
 
-    // store the current focused element
-    // since when we call .focus() it will change
-    const $focused = getFocused()
+    // store the current focused element, since it will change when we call .focus()
+    //
+    // need to pass in el.ownerDocument to get the correct focused element
+    // when el is in an iframe and the browser is not
+    // in focus (https://github.com/cypress-io/cypress/issues/8111)
+    const $focused = getFocused(el.ownerDocument)
 
     let hasFocused = false
 
@@ -220,8 +223,8 @@ const create = (state) => {
     return false
   }
 
-  const getFocused = () => {
-    const { activeElement } = state('document')
+  const getFocused = (document = state('document')) => {
+    const { activeElement } = document
 
     if ($dom.isFocused(activeElement)) {
       return $dom.wrap(activeElement)

packages/server/test/e2e/3_issue_8111_spec.js

@@ -0,0 +1,16 @@
+const e2e = require('../support/helpers/e2e').default
+const Fixtures = require('../support/helpers/fixtures')
+
+describe('e2e issue 8111 iframe input focus', function () {
+  e2e.setup()
+
+  e2e.it('iframe input retains focus when browser is out of focus', {
+    // this test is dependent on the browser being Chrome headed
+    // and also having --auto-open-devtools-for-tabs plugins option
+    // (which pulls focus from main browser window)
+    project: Fixtures.projectPath('issue-8111-iframe-input'),
+    spec: 'iframe_input_spec.js',
+    browser: 'chrome',
+    headed: true,
+  })
+})

packages/server/test/support/fixtures/projects/issue-8111-iframe-input/cypress.json

@@ -0,0 +1,3 @@
+{
+  "supportFolder": false
+}

packages/server/test/support/fixtures/projects/issue-8111-iframe-input/cypress/integration/iframe_input_spec.js

@@ -0,0 +1,8 @@
+it('can type into an input in an iframe that calls auto focus', () => {
+  cy.visit('/outer.html')
+  cy.get('iframe')
+  .its('0.contentDocument.body').should('not.be.empty')
+  .then(cy.wrap)
+  .find('input')
+  .type(42)
+})

packages/server/test/support/fixtures/projects/issue-8111-iframe-input/cypress/plugins/index.js

@@ -0,0 +1,7 @@
+module.exports = (on) => {
+  on('before:browser:launch', (browser, launchOptions) => {
+    launchOptions.args.push('--auto-open-devtools-for-tabs')
+
+    return launchOptions
+  })
+}

packages/server/test/support/fixtures/projects/issue-8111-iframe-input/inner.html

@@ -0,0 +1,4 @@
+<input />
+<script>
+  document.querySelector('input').focus();
+</script>

packages/server/test/support/fixtures/projects/issue-8111-iframe-input/outer.html

@@ -0,0 +1 @@
+<iframe src="/inner.html">