fix: prevent cy.type from losing focus from element on blur (#9254)

packages/driver/cypress/integration/commands/actions/type_spec.js

@@ -2041,6 +2041,16 @@ describe('src/cy/commands/actions/type - #type', () => {
         })
       })
 
+      // https://github.com/cypress-io/cypress/issues/5480
+      it('does NOT follow focus if target is blurred without another receiving focus', () => {
+        cy.$$('input:first').keydown(_.after(4, function () {
+          this.blur()
+        }))
+
+        cy.get('input:first').type('foobar')
+        .should('have.value', 'foobar')
+      })
+
       it('follows focus into date input', () => {
         cy.$$('input:first').on('input', _.after(3, _.once((e) => {
           cy.$$('input[type=date]:first').focus()

packages/driver/src/cy/keyboard.ts

@@ -710,9 +710,6 @@ export class Keyboard {
 
     debug('type:', options.chars, options)
 
-    const el = options.$el.get(0)
-    const doc = $document.getDocumentFromElement(el)
-
     let keys: string[]
 
     if (!options.parseSpecialCharSequences) {
@@ -741,23 +738,13 @@ export class Keyboard {
 
     options.onBeforeType(numKeys)
 
-    const getActiveEl = (doc: Document) => {
-      if (options.force) {
-        return options.$el.get(0)
-      }
-
-      const activeEl = $elements.getActiveElByDocument(options.$el) || doc.body
-
-      return activeEl
-    }
-
     let _skipCheckUntilIndex: number | undefined = 0
 
     const typeKeyFns = _.map(
       keyDetailsArr,
       (key: KeyInfo, currentKeyIndex: number) => {
         return () => {
-          const activeEl = getActiveEl(doc)
+          const activeEl = this.getActiveEl(options)
 
           if (key.type === 'shortcut') {
             this.simulateShortcut(activeEl, key, options)
@@ -853,7 +840,7 @@ export class Keyboard {
         return Promise.map(modifierKeys, (key) => {
           options.id = _.uniqueId('char')
 
-          return this.simulatedKeyup(getActiveEl(doc), key, options)
+          return this.simulatedKeyup(this.getActiveEl(options), key, options)
         })
       }
 
@@ -1277,7 +1264,13 @@ export class Keyboard {
 
     const doc = $document.getDocumentFromElement(el)
 
-    return $elements.getActiveElByDocument(options.$el) || doc.body
+    // If focus has changed to a new element, use the new element
+    // however, if the new element is the body (aka the current element was blurred) continue with the same element.
+    // this is to prevent strange edge cases where an element loses focus due to framework rerender or page load.
+    // https://github.com/cypress-io/cypress/issues/5480
+    options.targetEl = $elements.getActiveElByDocument(options.$el) || options.targetEl || doc.body
+
+    return options.targetEl
   }
 
   performSimulatedDefault (el: HTMLElement, key: KeyDetails, options: any) {