Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Click event triggered by .click() has isTrusted prop evaluate to false, so click does not perform in v-select component. #8376

Closed
Mikilll94 opened this issue Aug 21, 2020 · 2 comments
Labels
pkg/driver This is due to an issue in the packages/driver directory topic: cy.click 🖱 topic: native events type: bug

Comments

@Mikilll94
Copy link

Mikilll94 commented Aug 21, 2020

Current behavior:

I am using Vue + Vuetify. I have a problem with v-select component. If I click on v-select the list opens. However, Cypress does not close it when clicking outside of this component (in the repro project, Cypress clicks on Vuetify logo but for other elements this is also not working)

image

It does not work even if I use cy.wait(300) after opening the list (you can see this in the repro project)

Desired behavior:

The list should be closed when clicking outside of it. When I click as a user the list closes but when Cypress clicks it does not close it.

Test code to reproduce

Here is the repro project:

cypress-vuetify-test.zip

To run Vue.js app you need to execute:

npm install
npm run serve

then to launch Cypress you need to run:

npm run cypress:open

Versions

Cypress: 5.0.0
Operating system: Windows 10
Browser: Chrome 84.0.4147.135 (but on other browsers this bug is also present)

@jennifer-shehane jennifer-shehane changed the title Vuetify v-select list is not closed when Cypress clicks outside of it Click event triggered by .click() has isTrusted prop evaluate to false, so click does not perform in v-select component. Aug 24, 2020
@jennifer-shehane
Copy link
Member

This click does not perform the correct action because the v-select has some code that prevents programmatic clicks (outside of native real clicks), which is what Cypress is doing.

Their code looks like this:

  // If click was triggered programmaticaly (domEl.click()) then
  // it shouldn't be treated as click-outside
  // Chrome/Firefox support isTrusted property
  // IE/Edge support pointerType property (empty if not triggered
  // by pointing device)
  if (('isTrusted' in e && !e.isTrusted) ||
    ('pointerType' in e && !e.pointerType)
  ) return

The Cypress click event will have isTrusted evaluate to false, so the code returns and does not trigger any of the actions that would normally be performed.

Screen Shot 2020-08-24 at 1 44 49 PM

I don't know why they have such a strict check here. This isTrusted prop is readonly, so can't be set. We'd have to issue native events to fix this I believe. #311

@sainthkh
Copy link
Contributor

sainthkh commented Dec 7, 2020

The problem is solved at vuetifyjs/vuetify#12109. So, use the latest vuetify. As far as I checked, it worked with 2.3.19.

@sainthkh sainthkh closed this as completed Dec 7, 2020
@jennifer-shehane jennifer-shehane removed stage: ready for work The issue is reproducible and in scope internal-priority labels Dec 7, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
pkg/driver This is due to an issue in the packages/driver directory topic: cy.click 🖱 topic: native events type: bug
Projects
None yet
Development

No branches or pull requests

4 participants