fix: cy.type(' ') fires click event on button-like elements.

[sainthkh]

• Next step of fix: send click event with cy.type('{enter}'). #19726.
• Related with the comment

User facing changelog

cy.type(' ') fires click event on button-like elements.

Additional details

• Why was this change necessary? => When button-like elements get focus and space key is pressed, click event is fired. Cypress doesn't follow the browser behavior.
• What is affected by this change? => N/A

Implementation details to explain.

• Unlike enter, click event by space key is generated on all button-like elements(<button> tag, button, submit, reset, image, checkbox, radio input).
• But as for radio, click event is not sent when it is already checked.
• This change adds many event-related tests to type_spec.js. I decided to move event-related tests to type_events_spec.js.
• I changed filename from type-enter.html to click-event-by-type.html because it better suits the purpose.

How has the user experience changed?

Before: click event is not sent.
After: click event is sent.

PR Tasks

• Have tests been added/updated?
• [na] Has the original issue (or this PR, if no issue exists) been tagged with a release in ZenHub? (user-facing changes only)
• [na] Has a PR for user-facing changes been opened in cypress-documentation?
• [na] Have API changes been updated in the type definitions?
• [na] Have new configuration options been added to the cypress.schema.json?

[cypress-bot]

Thanks for taking the time to open a PR!

• Create a Draft Pull Request if your PR is not ready for review. Mark the PR as Ready for Review when you're ready for a Cypress team member to review the PR.
• Become familiar with the Code Review Checklist for guidelines on coding standards and what needs to be done before a PR can be merged.

[sainthkh]

For some reason, system-tests always fail for me.

[emilyrohrbough]

Can we break these tests out in a different PR? I can't tell what tests were added for the changes you made.

[sainthkh]

I temporarily removed type_events_spec.js. I'll bring it back in the next PR.

[emilyrohrbough]

With your previous changes in #19726, was #7318 implemented? and was #8267 fixed?

[sainthkh]

I read those 2 issues. And below are my opinions:

About #7318

I think #19541 and #7318 are separate issues. #7318 wants to listen to search event with cy.type('{enter}'). But the problem is that search event is not a standard event as @jennifer-shehane wrote in the issue.

I guess we can ignore this in this PR.

About #8267

Yes and no.

There are 2 problems in #8267.

1. cy.get('#button').focus().type('{enter}') should trigger click event. => It's solved by fix: send click event with cy.type('{enter}'). #19726.
2. cy.get('#button').type('f') should not send click event. => It's not solved and the debate isn't ended.

As in the comment of #8767, we should decide the current behavior of cy.type first.

It assumes that click is required before typing into an element. But as we all know, "click" isn't the only way to make elements get focus.

I believe #8267 should be handled after the decision about this has been made.

[emilyrohrbough]

This test does appear to fire a click event based on the assertion however the test title indicates it shouldn't be fired.

Is this relying on the state of radio fires click event when it is not checked? If not, it appears to be the same tests as radio fires click event when it is not checked. with a different assertion order.

[sainthkh]

Radio button has 2 states: unchecked (empty circle), checked (filled circle). When you focus the empty radio button (unchecked) and press the space bar, it is filled (checked) and click event is sent.

But when we press the space bar again, click event is not fired because the radio button is already checked.

To make it clear, I've edited the code like below:

// We're clicking here first to make the radio element checked.
cy.get(`#target-input-radio`).click().type(' ')

// item 0 is click event. It's fired because we want to make sure our radio button is checked.
cy.get('li').eq(1).should('have.text', 'keydown')
cy.get('li').eq(2).should('have.text', 'keypress')
cy.get('li').eq(3).should('have.text', 'keyup')

cy.get('#target-input-radio').should('be.checked')

[emilyrohrbough]

I think I'm misunderstanding, but If Firefox is the only browser that sends a click event with a space key, shouldn't this check be validating that the browser is Firefox? If this was chrome or Edge, this should send a click event that the browser wouldn't actually send giving the test a false-positive.

Cypress.isBrowser('firefox')

[sainthkh]

Unlike Chrome, Firefox automatically sends click event. Because of that, when we remove ! here, Chrome does not send a click event and Firefox sends click events twice.

This is the code to prevent this.

[sainthkh]

I've added comment like below:

// Firefox sends a click event when the Space key is pressed.
// We don't want send it twice.
!Cypress.isBrowser('firefox') &&

[emilyrohrbough]

Thanks for the explanation. I was concerned we were giving people a false-positive by sending a click event for chrome if it sent automatically.

[emilyrohrbough]

The comment linked in the summary state:

It's also important if the target changes i.e. calling .focus() in the keydown event the click event is triggered on the new target.

If the target changes from a onKeyDown callback on the element the space key was triggered on, does this change account and no-opt the click event?

[sainthkh]

@emilyrohrbough That comment has not been implemented yet. I need to validate the problem by writing a test about it first. It might be the part-4 of this series.

Because part 3 is creating type_event_spec.js I rolled back above.

[cypress-bot]

Released in 9.5.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v9.5.0, please open a new issue.