[Select] Dispatch click event with same target of the mousedown event

packages/material-ui/src/Select/Select.test.js

@@ -116,6 +116,7 @@ describe('<Select />', () => {
  const trigger = getByRole('button');
 
  fireEvent.mouseDown(trigger);
+ fireEvent.click(trigger);
 
  expect(handleBlur.callCount).to.equal(0);
  expect(getByRole('listbox')).not.to.equal(null);
@@ -246,7 +247,9 @@ describe('<Select />', () => {
  <MenuItem value="2" />
  </Select>,
  );
- fireEvent.mouseDown(getByRole('button'));
+ const button = getByRole('button');
+ fireEvent.mouseDown(button);
+ fireEvent.click(button);
  getAllByRole('option')[1].click();
 
  expect(onChangeHandler.calledOnce).to.equal(true);
@@ -265,7 +268,9 @@ describe('<Select />', () => {
  </Select>,
  );
 
- fireEvent.mouseDown(getByRole('button'));
+ const button = getByRole('button');
+ fireEvent.mouseDown(button);
+ fireEvent.click(button);
  getAllByRole('option')[1].click();
 
  expect(eventLog).to.deep.equal(['CHANGE_EVENT', 'CLOSE_EVENT']);
@@ -724,7 +729,9 @@ describe('<Select />', () => {
  }
  const { getByRole, queryByRole } = render(<ControlledWrapper />);
 
- fireEvent.mouseDown(getByRole('button'));
+ const button = getByRole('button');
+ fireEvent.mouseDown(button);
+ fireEvent.click(button);
  expect(getByRole('listbox')).not.to.equal(null);
 
  act(() => {
@@ -921,7 +928,9 @@ describe('<Select />', () => {
  });
  const { getByRole, getAllByRole } = render(<ControlledSelectInput onChange={onChange} />);
 
- fireEvent.mouseDown(getByRole('button'));
+ const button = getByRole('button');
+ fireEvent.mouseDown(button);
+ fireEvent.click(button);
  const options = getAllByRole('option');
  fireEvent.click(options[2]);
 

packages/material-ui/src/Select/SelectInput.js

@@ -74,6 +74,9 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
  const [menuMinWidthState, setMenuMinWidthState] = React.useState();
  const [openState, setOpenState] = React.useState(false);
  const handleRef = useForkRef(ref, inputRefProp);
+ const handleClick = React.useRef(null);
+ const menuRef = React.useRef(null);
+ const disablePointerEvents = React.useRef(false);
 
  const handleDisplayRef = React.useCallback((node) => {
  displayRef.current = node;
@@ -83,6 +86,14 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
  }
  }, []);
 
+ const handleMenuRef = React.useCallback((node) => {
+ menuRef.current = node;
+
+ if (node && disablePointerEvents.current) {
+ node.style.pointerEvents = 'none';
+ }
+ }, []);
+
  React.useImperativeHandle(
  handleRef,
  () => ({
@@ -95,6 +106,15 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
  [value],
  );
 
+ React.useEffect(() => {
+ const doc = ownerDocument(inputRef.current);
+ return () => {
+ if (handleClick.current) {
+ doc.removeEventListener('click', handleClick.current);
+ }
+ };
+ }, []);
+
  React.useEffect(() => {
  if (autoFocus) {
  displayRef.current.focus();
@@ -141,6 +161,21 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
  event.preventDefault();
  displayRef.current.focus();
 
+ const doc = ownerDocument(inputRef.current);
+ if (handleClick.current) {
+ doc.removeEventListener('click', handleClick.current);
+ }
+
+ // Disable menu pointer events between `mousedown` and `click`.
+ disablePointerEvents.current = true;
+ handleClick.current = () => {
+ disablePointerEvents.current = false;
+ menuRef.current.style.pointerEvents = 'auto';
+ doc.removeEventListener('click', handleClick.current);
+ handleClick.current = null;
+ };
+ doc.addEventListener('click', handleClick.current);
+
  update(true, event);
  };
 
@@ -426,6 +461,7 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
  })}
  />
  <Menu
+ ref={handleMenuRef}
  id={`menu-${name || ''}`}
  anchorEl={displayNode}
  open={open}

packages/material-ui/test/integration/Select.test.js

@@ -58,6 +58,7 @@ describe('<Select> integration', () => {
  // Let's open the select component
  // in the browser user click also focuses
  fireEvent.mouseDown(trigger);
+ fireEvent.click(trigger);
 
  const options = getAllByRole('option');
  expect(options[1]).toHaveFocus();
@@ -82,6 +83,7 @@ describe('<Select> integration', () => {
  // Let's open the select component
  // in the browser user click also focuses
  fireEvent.mouseDown(trigger);
+ fireEvent.click(trigger);
 
  const options = getAllByRole('option');
  expect(options[1]).toHaveFocus();

test/e2e/fixtures/ClickAwayListener/WithSelect.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import Select from '@material-ui/core/Select';
+import MenuItem from '@material-ui/core/MenuItem';
+import ClickAwayListener from '@material-ui/core/ClickAwayListener';
+
+export default function WithSelect() {
+ const [counter, setCounter] = React.useState(0);
+
+ return (
+ <React.Fragment>
+ <div id="onClickAway">{counter}</div>
+ <ClickAwayListener onClickAway={() => setCounter(counter + 1)}>
+ <Select value="">
+ <MenuItem value={10}>One</MenuItem>
+ <MenuItem value={20}>Two</MenuItem>
+ <MenuItem value={30}>Three</MenuItem>
+ </Select>
+ </ClickAwayListener>
+ </React.Fragment>
+ );
+}

test/e2e/index.test.ts

@@ -98,4 +98,16 @@ describe('e2e', () => {
  expect(await page.evaluate(() => document.activeElement?.textContent)).to.equal('ok');
  });
  });
+
+ describe('<ClickAwayListener />', () => {
+ it('should not call onClickAway when opening a select', async () => {
+ await renderFixture('ClickAwayListener/WithSelect');
+ expect(await page.textContent('#onClickAway')).to.equal('0');
+ await page.click('body');
+ expect(await page.textContent('#onClickAway')).to.equal('1');
+ await page.click('[role="button"]');
+ await page.click('"One"');
+ expect(await page.textContent('#onClickAway')).to.equal('1');
+ });
+ });
 });