Repository: mui/material-ui (TypeScript)
Date: 2020-01-28 02:12:07+00:00
Task type: Bug Fix

Issue:
Select doesn't respond to click event through code
<!-- Provide a general summary of the issue in the Title above -->
Hi, i'm trying to test my select component with puppeteer.

<!--
  Thank you very much for contributing to Material-UI by creating an issue! ❤️
  To avoid duplicate issues we ask you to check off the following list.
-->

<!-- Checked checkbox should look like this: [x] -->

- [x] The issue is present in the latest release.
- [x] I have searched the [issues](https://github.com/mui-org/material-ui/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
<!-- Describe what happens instead of the expected behavior. -->

## Expected Behavior 🤔
document.querySelector('[data-testid="my-select"] [role="button"]').click()
should trigger the click event on the select and open the component
<!-- Describe what should happen. -->

## 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.
<!--
  What are you trying to accomplish? How has this issue affected you?
  Providing context helps us come up with a solution that is most useful in the real world.
-->

## Your Environment 🌎

<!--
  Include as many relevant details about the environment with which you experienced the bug.
  If you encounter issues with typescript please include version and tsconfig.
-->

| Tech        | Version |
| ----------- | ------- |
| Material-UI | v4.8.3  |
| React | v16.8.5 |
| Jest | v24.8.0 |
| Puppeteer | v2.0.0 |
| etc.        |         |



Issue discussion:
See #18655.
> also it seems that since that version right-click on Select also open the component what didn't happen in the version 

Interesting.
> 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.
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?
@dudif Trigger a mouse down.
> > 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 https://github.com/mui-org/material-ui/pull/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](https://w3c.github.io/uievents/#dom-mouseevent-button) clicked in the [`onMouseDown` event handler](https://github.com/mui-org/material-ui/blob/f3a74baf0edcbf4eed16d6294046be1224f36e2c/packages/material-ui/src/Select/SelectInput.js#L107)
@fyodore82 https://github.com/mui-org/material-ui/search?q=ignore+everything+but+left-click&unscoped_q=ignore+everything+but+left-click
@oliviertassinari , thank you! This is exactly I've suggested to implement. I'll do it

Solution patch:
diff --git a/packages/material-ui/src/Select/SelectInput.js b/packages/material-ui/src/Select/SelectInput.js
--- a/packages/material-ui/src/Select/SelectInput.js
+++ b/packages/material-ui/src/Select/SelectInput.js
@@ -105,6 +105,9 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
   };
 
   const handleMouseDown = event => {
+    if (event.button !== 0)
+      // ignore everything but left-click
+      return;
     // Hijack the default focus behavior.
     event.preventDefault();
     displayNode.focus();


Test patch:
diff --git a/packages/material-ui/src/Select/Select.test.js b/packages/material-ui/src/Select/Select.test.js
--- a/packages/material-ui/src/Select/Select.test.js
+++ b/packages/material-ui/src/Select/Select.test.js
@@ -671,6 +671,30 @@ describe('<Select />', () => {
 
       expect(getByRole('listbox')).to.be.ok;
     });
+
+    it('open only with the left mouse button click', () => {
+      // Test for https://github.com/mui-org/material-ui/issues/19250#issuecomment-578620934
+      // Right/middle mouse click shouldn't open the Select
+      const { getByRole, queryByRole } = render(
+        <Select value="">
+          <MenuItem value="">
+            <em>None</em>
+          </MenuItem>
+          <MenuItem value={10}>Ten</MenuItem>
+          <MenuItem value={20}>Twenty</MenuItem>
+          <MenuItem value={30}>Thirty</MenuItem>
+        </Select>,
+      );
+
+      const trigger = getByRole('button');
+
+      // If clicked by the right/middle mouse button, no options list should be opened
+      fireEvent.mouseDown(trigger, { button: 1 });
+      expect(queryByRole('listbox')).to.not.exist;
+
+      fireEvent.mouseDown(trigger, { button: 2 });
+      expect(queryByRole('listbox')).to.not.exist;
+    });
   });
 
   describe('prop: autoWidth', () => {