fix programmatic focus/blur events, typing into currently focused

cli/types/index.d.ts

@@ -1783,6 +1783,15 @@ declare namespace Cypress {
      * @see https://on.cypress.io/writefile
      */
     writeFile<C extends FileContents>(filePath: string, contents: C, encoding: Encodings, options?: Partial<Loggable>): Chainable<C>
+
+    /**
+     * jQuery library bound to the AUT
+     *
+     * @see https://on.cypress.io/$
+     * @example
+     *    cy.$$('p')
+     */
+    $$: JQueryStatic
   }
 
   interface SinonSpyAgent<A extends sinon.SinonSpy> {

packages/driver/package.json

@@ -31,6 +31,7 @@
     "bytes": "3.1.0",
     "chai": "3.5.0",
     "chai-as-promised": "6.0.0",
+    "chai-subset": "1.6.0",
     "chokidar-cli": "1.2.2",
     "clone": "2.1.2",
     "compression": "1.7.4",

packages/driver/src/cy/commands/actions/click.coffee

@@ -44,7 +44,6 @@ module.exports = (Commands, Cypress, cy, state, config) ->
         $el = $dom.wrap(el)
 
         domEvents = {}
-        $previouslyFocusedEl = null
 
         if options.log
           ## figure out the options which actually change the behavior of clicks
@@ -149,9 +148,6 @@ module.exports = (Commands, Cypress, cy, state, config) ->
             ## without firing the focus event
             $previouslyFocused = cy.getFocused()
 
-            if el = cy.needsForceFocus()
-              cy.fireFocus(el)
-
             el = $elToClick.get(0)
 
             domEvents.mouseDown = $Mouse.mouseDown($elToClick, coords.fromViewport)
@@ -169,21 +165,17 @@ module.exports = (Commands, Cypress, cy, state, config) ->
 
               ## retrieve the first focusable $el in our parent chain
               $elToFocus = $elements.getFirstFocusableEl($elToClick)
-
               if cy.needsFocus($elToFocus, $previouslyFocused)
-                cy.fireFocus($elToFocus.get(0))
-
-                ## if we are currently trying to focus
-                ## the body then calling body.focus()
-                ## is a noop, and it will not blur the
-                ## current element, which is all so wrong
-                if $elToFocus.is("body")
+                if $dom.isWindow($elToFocus)
+                  # if the first focusable element from the click
+                  # is the window, then we can skip the focus event
+                  # since the user has clicked a non-focusable element
                   $focused = cy.getFocused()
-
-                  ## if the current focused element hasn't changed
-                  ## then blur manually
-                  if $elements.isSame($focused, $previouslyFocused)
-                    cy.fireBlur($focused.get(0))
+                  if $focused
+                    cy.fireBlur $focused.get(0)
+                else
+                  # the user clicked inside a focusable element
+                  cy.fireFocus $elToFocus.get(0)
 
               afterMouseDown($elToClick, coords)
         })

packages/driver/src/cy/commands/actions/focus.coffee

@@ -28,10 +28,20 @@ module.exports = (Commands, Cypress, cy, state, config) ->
           consoleProps: ->
             "Applied To": $dom.getElements(options.$el)
 
-      ## http://www.w3.org/TR/html5/editing.html#specially-focusable
+      el = options.$el.get(0)
+
+      ## the body is not really focusable, but it
+      ## can have focus on initial page load.
+      ## this is instead a noop.
+      ## TODO: throw on body instead (breaking change)
+      isBody = $dom.isJquery(options.$el) &&
+        $elements.isElement(options.$el.get(0)) &&
+        $elements.isBody(options.$el.get(0))
+
+      ## http://www.w3.org/$R/html5/editing.html#specially-focusable
       ## ensure there is only 1 dom element in the subject
       ## make sure its allowed to be focusable
-      if not (isWin or $dom.isFocusable(options.$el))
+      if not (isWin or isBody or $dom.isFocusable(options.$el))
         return if options.error is false
 
         node = $dom.stringify(options.$el)
@@ -48,7 +58,6 @@ module.exports = (Commands, Cypress, cy, state, config) ->
           args: { num }
         })
 
-      el = options.$el.get(0)
 
       cy.fireFocus(el)
 

packages/driver/src/cy/commands/actions/type.coffee

@@ -328,16 +328,30 @@ module.exports = (Commands, Cypress, cy, state, config) ->
         ## if it's the body, don't need to worry about focus
         return type() if isBody
 
+        ## if the subject is already the focused element, start typing
+        ## we handle contenteditable children by getting the host contenteditable,
+        ## and seeing if that is focused
+        ## Checking first if element is focusable accounts for focusable els inside
+        ## of contenteditables
+        $focused = cy.getFocused()
+        $focused = $focused && $focused[0]
+
+        if $elements.isFocusable(options.$el)
+          elToCheckCurrentlyFocused = options.$el[0]
+        else if $elements.isContentEditable(options.$el[0])
+          elToCheckCurrentlyFocused = $selection.getHostContenteditable(options.$el[0])
+
+        if elToCheckCurrentlyFocused && elToCheckCurrentlyFocused is $focused
+          ## TODO: not scrolling here, but revisit when scroll algorithm changes
+          return type()
+
         $actionability.verify(cy, options.$el, options, {
           onScroll: ($el, type) ->
             Cypress.action("cy:scrolled", $el, type)
 
           onReady: ($elToClick) ->
             $focused = cy.getFocused()
 
-            if el = cy.needsForceFocus()
-              cy.fireFocus(el)
-
             ## if we dont have a focused element
             ## or if we do and its not ourselves
             ## then issue the click

packages/driver/src/cy/focused.coffee

@@ -4,16 +4,18 @@ $elements = require("../dom/elements")
 $actionability = require("./actionability")
 
 create = (state) ->
+
+  documentHasFocus = () ->
+    ## hardcode document has focus as true
+    ## since the test should assume the window
+    ## is in focus the entire time
+    return true
+
   fireBlur = (el) ->
     win = $window.getWindowByElement(el)
 
     hasBlurred = false
 
-    hasFocus = top.document.hasFocus()
-
-    if not hasFocus
-      win.focus()
-
     ## we need to bind to the blur event here
     ## because some browsers will not ever fire
     ## the blur event if the window itself is not
@@ -42,25 +44,33 @@ create = (state) ->
     ## fallback if our focus event never fires
     ## to simulate the focus + focusin
     if not hasBlurred
-      ## todo handle relatedTarget's per the spec
-      focusoutEvt = new FocusEvent "focusout", {
-        bubbles: true
-        cancelable: false
-        view: win
-        relatedTarget: null
-      }
-
-      blurEvt = new FocusEvent "blur", {
-        bubble: false
-        cancelable: false
-        view: win
-        relatedTarget: null
-      }
-
-      el.dispatchEvent(blurEvt)
-      el.dispatchEvent(focusoutEvt)
+      simulateBlurEvent(el, win)
+
+  simulateBlurEvent = (el, win) ->
+    ## todo handle relatedTarget's per the spec
+    focusoutEvt = new FocusEvent "focusout", {
+      bubbles: true
+      cancelable: false
+      view: win
+      relatedTarget: null
+    }
+
+    blurEvt = new FocusEvent "blur", {
+      bubble: false
+      cancelable: false
+      view: win
+      relatedTarget: null
+    }
+
+    el.dispatchEvent(blurEvt)
+    el.dispatchEvent(focusoutEvt)
 
   fireFocus = (el) ->
+    ## body will never emit focus events
+    ## so we avoid simulating this
+    if $elements.isBody(el)
+      return
+
     ## if we are focusing a different element
     ## dispatch any primed change events
     ## we have to do this because our blur
@@ -77,11 +87,6 @@ create = (state) ->
 
     hasFocused = false
 
-    hasFocus = top.document.hasFocus()
-
-    if not hasFocus
-      win.focus()
-
     ## we need to bind to the focus event here
     ## because some browsers will not ever fire
     ## the focus event if the window itself is not
@@ -98,34 +103,9 @@ create = (state) ->
 
     cleanup()
 
-    ## body will never emit focus events
-    ## so we avoid simulating this
-    if $elements.isBody(el)
-      return
-
     ## fallback if our focus event never fires
     ## to simulate the focus + focusin
     if not hasFocused
-      simulate = ->
-        ## todo handle relatedTarget's per the spec
-        focusinEvt = new FocusEvent "focusin", {
-          bubbles: true
-          view: win
-          relatedTarget: null
-        }
-
-        focusEvt = new FocusEvent "focus", {
-          view: win
-          relatedTarget: null
-        }
-
-        ## not fired in the correct order per w3c spec
-        ## because chrome chooses to fire focus before focusin
-        ## and since we have a simulation fallback we end up
-        ## doing it how chrome does it
-        ## http://www.w3.org/TR/DOM-Level-3-Events/#h-events-focusevent-event-order
-        el.dispatchEvent(focusEvt)
-        el.dispatchEvent(focusinEvt)
 
       ## only blur if we have a focused element AND its not
       ## currently ourselves!
@@ -136,50 +116,56 @@ create = (state) ->
         if not $window.isWindow(el)
           fireBlur($focused.get(0))
 
-      simulate()
+      simulateFocusEvent(el, win)
+
+  simulateFocusEvent = (el, win) ->
+    ## todo handle relatedTarget's per the spec
+    focusinEvt = new FocusEvent "focusin", {
+      bubbles: true
+      view: win
+      relatedTarget: null
+    }
+
+    focusEvt = new FocusEvent "focus", {
+      view: win
+      relatedTarget: null
+    }
+
+    ## not fired in the correct order per w3c spec
+    ## because chrome chooses to fire focus before focusin
+    ## and since we have a simulation fallback we end up
+    ## doing it how chrome does it
+    ## http://www.w3.org/TR/DOM-Level-3-Events/#h-events-focusevent-event-order
+    el.dispatchEvent(focusEvt)
+    el.dispatchEvent(focusinEvt)
 
   interceptFocus = (el, contentWindow, focusOption) ->
-    ## if our document does not have focus
-    ## then that means that we need to attempt to
-    ## bring our window into focus, and then figure
-    ## out if the browser fires the native focus
-    ## event - and if it doesn't, to flag this
-    ## element as needing focus on the next action
-    ## command
-    hasFocus = top.document.hasFocus()
-
-    if not hasFocus
-      contentWindow.focus()
-
-      didReceiveFocus = false
-
-      onFocus = ->
-        didReceiveFocus = true
-
-      $elements.callNativeMethod(el, "addEventListener", "focus", onFocus)
-
-    evt = $elements.callNativeMethod(el, "focus", focusOption)
+    ## normally programmatic focus calls cause "primed" focus/blur
+    ## events if the window is not in focus
+    ## so we fire fake events to act as if the window
+    ## is always in focus
+    $focused = getFocused()
 
-    ## always unbind if added listener
-    if onFocus
-      $elements.callNativeMethod(el, "removeEventListener", "focus", onFocus)
+    if $elements.isFocusable($dom.wrap(el)) && (!$focused || $focused[0] isnt el)
+      fireFocus(el)
+      return
 
-      ## if we didn't receive focus
-      if not didReceiveFocus
-        ## then store this element as needing
-        ## force'd focus later on
-        state("needsForceFocus", el)
+    $elements.callNativeMethod(el, 'focus')
+    return
 
-    return evt
+  interceptBlur = (el) ->
+    ## normally programmatic blur calls cause "primed" focus/blur
+    ## events if the window is not in focus
+    ## so we fire fake events to act as if the window
+    ## is always in focus.
+    $focused = getFocused()
 
-  needsForceFocus = ->
-    ## if we have a primed focus event then
-    if needsForceFocus = state("needsForceFocus")
-      ## always reset it
-      state("needsForceFocus", null)
+    if $focused && $focused[0] is el
+      fireBlur(el)
+      return
 
-    ## and return whatever needs force focus
-    return needsForceFocus
+    $elements.callNativeMethod(el, 'blur')
+    return
 
   needsFocus = ($elToFocus, $previouslyFocusedEl) ->
     $focused = getFocused()
@@ -225,7 +211,9 @@ create = (state) ->
 
     interceptFocus
 
-    needsForceFocus
+    interceptBlur,
+
+    documentHasFocus,
   }
 
 module.exports = {

packages/driver/src/cypress/cy.coffee

@@ -154,11 +154,20 @@ create = (specWindow, Cypress, Cookies, state, config, log) ->
       contentWindow.HTMLElement.prototype.focus = (focusOption) ->
         focused.interceptFocus(this, contentWindow, focusOption)
 
+      contentWindow.HTMLElement.prototype.blur = ->
+        focused.interceptBlur(this)
+
+      contentWindow.SVGElement.prototype.focus = (focusOption) ->
+        focused.interceptFocus(this, contentWindow, focusOption)
+
+      contentWindow.SVGElement.prototype.blur = ->
+        focused.interceptBlur(this)
+
       contentWindow.HTMLInputElement.prototype.select = ->
         $selection.interceptSelect.call(this)
 
       contentWindow.document.hasFocus = ->
-        top.document.hasFocus()
+        focused.documentHasFocus.call(@)
 
   enqueue = (obj) ->
     ## if we have a nestedIndex it means we're processing
@@ -625,7 +634,6 @@ create = (specWindow, Cypress, Cookies, state, config, log) ->
 
     ## focused sync methods
     getFocused: focused.getFocused
-    needsForceFocus: focused.needsForceFocus
     needsFocus: focused.needsFocus
     fireFocus: focused.fireFocus
     fireBlur: focused.fireBlur