Fix selector playground triggering keyboard shortcut (#5285)

* don’t trigger shortcuts if typing into a text-like element

* refactor / cleanup

packages/driver/src/cypress.coffee

@@ -498,5 +498,6 @@ class $Cypress
 ## attaching these so they are accessible
 ## via the runner + integration spec helper
 $Cypress.$ = $
+$Cypress.dom = $dom
 
 module.exports = $Cypress

packages/reporter/cypress/integration/shortcuts_spec.js

@@ -28,37 +28,50 @@ describe('controls', function () {
     })
   })
 
-  describe('shortcuts', function () {
-    it('stops tests', function () {
+  describe('shortcuts', () => {
+    it('stops tests', () => {
       cy.get('body').then(() => {
-        expect(runner.emit).to.not.have.been.calledWith('runner:stop')
+        expect(runner.emit).not.to.have.been.calledWith('runner:stop')
       })
 
       cy.get('body').type('s').then(() => {
         expect(runner.emit).to.have.been.calledWith('runner:stop')
       })
     })
 
-    it('resumes tests', function () {
+    it('resumes tests', () => {
       cy.get('body').then(() => {
-        expect(runner.emit).to.not.have.been.calledWith('runner:restart')
+        expect(runner.emit).not.to.have.been.calledWith('runner:restart')
       })
 
       cy.get('body').type('r').then(() => {
         expect(runner.emit).to.have.been.calledWith('runner:restart')
       })
     })
 
-    it('focuses on specs', function () {
+    it('focuses on specs', () => {
       cy.get('body').then(() => {
-        expect(runner.emit).to.not.have.been.calledWith('focus:tests')
+        expect(runner.emit).not.to.have.been.calledWith('focus:tests')
       })
 
       cy.get('body').type('f').then(() => {
         expect(runner.emit).to.have.been.calledWith('focus:tests')
       })
     })
 
+    it('does not run shortcut if typed into an input', () => {
+      cy.get('body')
+      .then(($body) => {
+        // this realistically happens with the selector playground, but
+        // need to add an input since this environment is isolated
+        $body.append('<input id="temp-input" />')
+      })
+      .get('#temp-input').type('r')
+      .then(() => {
+        expect(runner.emit).not.to.have.been.calledWith('runner:restart')
+      })
+    })
+
     it('has shortcut in tooltips', () => {
       cy.get('.focus-tests > button').trigger('mouseover')
       cy.get('.tooltip').should('have.text', 'View All Tests F')

packages/reporter/src/lib/shortcuts.js

@@ -1,14 +1,19 @@
+import { $, dom } from '@packages/driver'
 import events from './events'
 
 class Shortcuts {
-  start (appState) {
-    this._appState = appState
+  start () {
     document.addEventListener('keydown', this._handleKeyDownEvent)
   }
+
   stop () {
     document.removeEventListener('keydown', this._handleKeyDownEvent)
   }
+
   _handleKeyDownEvent (event) {
+    // if typing into an input, textarea, etc, don't trigger any shortcuts
+    if (dom.isTextLike($(event.target))) return
+
     switch (event.key) {
       case 'r': events.emit('restart')
         break

packages/reporter/src/main.jsx

@@ -76,7 +76,7 @@ class Reporter extends Component {
   }
 
   componentDidMount () {
-    shortcuts.start(this.props.appState)
+    shortcuts.start()
     EQ.init()
   }
   componentWillUnmount () {