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

Select doesn't respond to click event through code #19250

Closed
2 tasks done
dudif opened this issue Jan 15, 2020 · 8 comments · Fixed by #19434
Closed
2 tasks done

Select doesn't respond to click event through code #19250

dudif opened this issue Jan 15, 2020 · 8 comments · Fixed by #19434
Labels
bug 🐛 Something doesn't work component: select This is the name of the generic UI component, not the React module! ready to take Help wanted. Guidance available. There is a high chance the change will be accepted

Comments

@dudif
Copy link

dudif commented Jan 15, 2020

Hi, i'm trying to test my select component with puppeteer.

  • The issue is present in the latest release.
  • I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

i'm trying this:
document.querySelector('[data-testid="my-select"] [role="button"]').click()
and it seems to do nothing.
it worked before in version 4.6.1

also it seems that since that version right click on Select also open the component what didn't happened in the version 4.6.1

Expected Behavior 🤔

document.querySelector('[data-testid="my-select"] [role="button"]').click()
should trigger the click event on the select and open the component

Context 🔦

this issue effecting on all my tests (unit tests, ui tests).
because i can't find a way to trigger click event on the select through code.

Your Environment 🌎

Tech Version
Material-UI v4.8.3
React v16.8.5
Jest v24.8.0
Puppeteer v2.0.0
etc.
@dudif dudif changed the title Select doesn't respond to click event through Select doesn't respond to click event through code Jan 15, 2020
@oliviertassinari oliviertassinari added duplicate This issue or pull request already exists test labels Jan 15, 2020
@oliviertassinari
Copy link
Member

See #18655.

@oliviertassinari oliviertassinari added component: select This is the name of the generic UI component, not the React module! and removed duplicate This issue or pull request already exists test labels Jan 15, 2020
@oliviertassinari
Copy link
Member

also it seems that since that version right-click on Select also open the component what didn't happen in the version

Interesting.

@eps1lon
Copy link
Member

eps1lon commented Jan 15, 2020

also it seems that since that version right click on Select also open the component what didn't happened in the version 4.6.1

This is indeed a bug. The native select does not open if the right mouse button is down. Probably only responds to left mouse button down.

@eps1lon eps1lon added the bug 🐛 Something doesn't work label Jan 15, 2020
@dudif
Copy link
Author

dudif commented Jan 15, 2020

i'm not using react-testing library so i didn't understood how #18655 can help me.

what do you think i can do to trigger the click event?

@oliviertassinari
Copy link
Member

@dudif Trigger a mouse down.

@oliviertassinari oliviertassinari added the ready to take Help wanted. Guidance available. There is a high chance the change will be accepted label Jan 17, 2020
@fyodor-e
Copy link
Contributor

fyodor-e commented Jan 27, 2020

also it seems that since that version right-click on Select also open the component what didn't happen in the version

Interesting.

In PR #17978 onClick event listerner has been replaced by onMouseDown event listerner. But onMouseDown is fired on any mouse button click. onClick was fired on left (primary) button click (See https://www.w3schools.com/jsref/event_onmousedown.asp).

To resolve, I may suggest to check if primary button clicked in the onMouseDown event handler

@fyodor-e
Copy link
Contributor

fyodor-e commented Jan 27, 2020

@oliviertassinari , thank you! This is exactly I've suggested to implement. I'll do it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: select This is the name of the generic UI component, not the React module! ready to take Help wanted. Guidance available. There is a high chance the change will be accepted
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants