Skip to content

Commit

Permalink
fix: click event is fired correctly when focus has changed (#20525)
Browse files Browse the repository at this point in the history
  • Loading branch information
@sainthkh
sainthkh committed Mar 10, 2022
1 parent ffba29d commit 19db0ce
Show file tree
Hide file tree
Showing 3 changed files with 130 additions and 25 deletions.
61 changes: 53 additions & 8 deletions packages/driver/cypress/fixtures/click-event-by-type.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,33 @@
</head>

<body>
<button id="reset">clear log</button>
<button id="target-button-tag">button tag</button>
<input id="target-input-button" type="button" value="input button" />
<input id="target-input-image" type="image" value="input image" />
<input id="target-input-reset" type="reset" value="input reset" />
<input id="target-input-submit" type="submit" value="input submit" />
<input id="target-input-checkbox" type="checkbox" value="input checkbox" />
<input id="target-input-radio" type="radio" value="input radio" />
<div>
<button id="reset">clear log</button>
</div>

<div>
<input id="input-text" type="text" />
<select id="focus-options">
<option value="clear">clear</option>
<option value="button-tag">button tag</option>
<option value="input-button">input button</option>
<option value="input-image">input image</option>
<option value="input-reset">input reset</option>
<option value="input-submit">input submit</option>
<option value="input-checkbox">input checkbox</option>
<option value="input-radio">input radio</option>
</select>
</div>

<div>
<button id="target-button-tag">button tag</button>
<input id="target-input-button" type="button" value="input button" />
<input id="target-input-image" type="image" value="input image" />
<input id="target-input-reset" type="reset" value="input reset" />
<input id="target-input-submit" type="submit" value="input submit" />
<input id="target-input-checkbox" type="checkbox" value="input checkbox" />
<input id="target-input-radio" type="radio" value="input radio" />
</div>

<div id="log"></div>

Expand Down Expand Up @@ -70,6 +89,32 @@
updateLog("keyup");
});
});

let handler = null
const focusOptions = document.getElementById("focus-options");

focusOptions.addEventListener('change', (event) => {
const val = event.target.value;
const target = document.getElementById('input-text');

if (handler) {
target.removeEventListener('keydown', handler);
}

if (val === 'clear') {
handler = null

return
}

handler = (e) => {
const focusEl = document.getElementById(`target-${val}`);

focusEl.focus()
}

target.addEventListener('keydown', handler);
})
</script>
</body>
</html>
68 changes: 59 additions & 9 deletions packages/driver/cypress/integration/commands/actions/type_events_spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -585,16 +585,16 @@ describe('src/cy/commands/actions/type - #type events', () => {

describe('triggers', () => {
const targets = [
'#target-button-tag',
'#target-input-button',
'#target-input-image',
'#target-input-reset',
'#target-input-submit',
'button-tag',
'input-button',
'input-image',
'input-reset',
'input-submit',
]

targets.forEach((target) => {
it(target, () => {
cy.get(target).focus().type('{enter}')
cy.get(`#target-${target}`).focus().type('{enter}')

cy.get('li').should('have.length', 4)
cy.get('li').eq(0).should('have.text', 'keydown')
Expand All @@ -603,24 +603,51 @@ describe('src/cy/commands/actions/type - #type events', () => {
cy.get('li').eq(3).should('have.text', 'keyup')
})
})

describe('keydown triggered on another element', () => {
targets.forEach((target) => {
it(target, () => {
cy.get('#focus-options').select(target)
cy.get('#input-text').focus().type('{enter}')

cy.get('li').should('have.length', 3)
cy.get('li').eq(0).should('have.text', 'keypress')
cy.get('li').eq(1).should('have.text', 'click')
cy.get('li').eq(2).should('have.text', 'keyup')
})
})
})
})

describe('does not trigger', () => {
const targets = [
'#target-input-checkbox',
'#target-input-radio',
'input-checkbox',
'input-radio',
]

targets.forEach((target) => {
it(target, () => {
cy.get(target).focus().type('{enter}')
cy.get(`#target-${target}`).focus().type('{enter}')

cy.get('li').should('have.length', 3)
cy.get('li').eq(0).should('have.text', 'keydown')
cy.get('li').eq(1).should('have.text', 'keypress')
cy.get('li').eq(2).should('have.text', 'keyup')
})
})

describe('keydown triggered on another element', () => {
targets.forEach((target) => {
it(target, () => {
cy.get('#focus-options').select(target)
cy.get('#input-text').focus().type('{enter}')

cy.get('li').should('have.length', 2)
cy.get('li').eq(0).should('have.text', 'keypress')
cy.get('li').eq(1).should('have.text', 'keyup')
})
})
})
})
})

Expand Down Expand Up @@ -770,5 +797,28 @@ describe('src/cy/commands/actions/type - #type events', () => {
cy.get('#target-input-radio').should('be.checked')
})
})

describe('keydown on another element does not trigger click', () => {
const targets = [
'button-tag',
'input-button',
'input-image',
'input-reset',
'input-submit',
'input-checkbox',
'input-radio',
]

targets.forEach((target) => {
it(target, () => {
cy.get('#focus-options').select('button-tag')
cy.get('#input-text').focus().type(' ')

cy.get('li').should('have.length', 2)
cy.get('li').eq(0).should('have.text', 'keypress')
cy.get('li').eq(1).should('have.text', 'keyup')
})
})
})
})
})
26 changes: 18 additions & 8 deletions packages/driver/src/cy/commands/actions/type.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -275,18 +275,15 @@ export default function (Commands, Cypress, cy, state, config) {
const isContentEditable = $elements.isContentEditable(options.$el.get(0))
const isTextarea = $elements.isTextarea(options.$el.get(0))

// click event is only fired on button, image, submit, reset elements.
// That's why we cannot use $elements.isButtonLike() here.
const type = (type) => $elements.isInputType(options.$el.get(0), type)
const sendClickEvent = type('button') || type('image') || type('submit') || type('reset')

const fireClickEvent = (el) => {
const ctor = $dom.getDocumentFromElement(el).defaultView!.PointerEvent
const event = new ctor('click')

el.dispatchEvent(event)
}

let keydownEvents: any[] = []

return keyboard.type({
$el: options.$el,
chars,
Expand Down Expand Up @@ -332,21 +329,29 @@ export default function (Commands, Cypress, cy, state, config) {
updateTable(id, key, event, value)
}

if (event.type === 'keydown') {
keydownEvents.push(event.target)
}

if (
// Firefox sends a click event when the Space key is pressed.
// We don't want send it twice.
// We don't want to send it twice.
!Cypress.isBrowser('firefox') &&
// Click event is sent after keyup event with space key.
event.type === 'keyup' && event.code === 'Space' &&
// When event is prevented, the click event should not be emitted
!event.defaultPrevented &&
// Click events should be only sent to button-like elements.
// event.target is null when used with shadow DOM.
(event.target && $elements.isButtonLike(event.target)) &&
// When a space key is pressed for input radio elements, the click event is only fired when it's not checked.
!(event.target.tagName === 'INPUT' && event.target.type === 'radio' && event.target.checked === true) &&
// When event is prevented, the click event should not be emitted
!event.defaultPrevented
// When a space key is pressed on another element, the click event should not be fired.
keydownEvents.includes(event.target)
) {
fireClickEvent(event.target)

keydownEvents = []
}
},

Expand Down Expand Up @@ -391,6 +396,11 @@ export default function (Commands, Cypress, cy, state, config) {
return
}

// click event is only fired on button, image, submit, reset elements.
// That's why we cannot use $elements.isButtonLike() here.
const type = (type) => $elements.isInputType(el, type)
const sendClickEvent = type('button') || type('image') || type('submit') || type('reset')

// https://github.com/cypress-io/cypress/issues/19541
// Send click event on type('{enter}')
if (sendClickEvent) {
Expand Down

3 comments on commit 19db0ce

@cypress-bot
Copy link
Contributor

@cypress-bot cypress-bot bot commented on 19db0ce Mar 10, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Circle has built the linux x64 version of the Test Runner.

Learn more about this pre-release platform-specific build at https://on.cypress.io/installing-cypress#Install-pre-release-version.

Run this command to install the pre-release locally:

npm install https://cdn.cypress.io/beta/npm/9.5.2/linux-x64/develop-19db0ce0da63544aeeffc1b5445a0d2455baf984/cypress.tgz

@cypress-bot
Copy link
Contributor

@cypress-bot cypress-bot bot commented on 19db0ce Mar 10, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Circle has built the darwin x64 version of the Test Runner.

Learn more about this pre-release platform-specific build at https://on.cypress.io/installing-cypress#Install-pre-release-version.

Run this command to install the pre-release locally:

npm install https://cdn.cypress.io/beta/npm/9.5.2/darwin-x64/develop-19db0ce0da63544aeeffc1b5445a0d2455baf984/cypress.tgz

@cypress-bot
Copy link
Contributor

@cypress-bot cypress-bot bot commented on 19db0ce Mar 10, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Circle has built the win32 x64 version of the Test Runner.

Learn more about this pre-release platform-specific build at https://on.cypress.io/installing-cypress#Install-pre-release-version.

Run this command to install the pre-release locally:

npm install https://cdn.cypress.io/beta/npm/9.5.2/win32-x64/develop-19db0ce0da63544aeeffc1b5445a0d2455baf984/cypress.tgz

Please sign in to comment.