diff --git a/packages/material-ui/src/Select/Select.test.js b/packages/material-ui/src/Select/Select.test.js
index 9db1aa24b77415..81c3c8cd98735d 100644
--- a/packages/material-ui/src/Select/Select.test.js
+++ b/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]);
 
diff --git a/packages/material-ui/src/Select/SelectInput.js b/packages/material-ui/src/Select/SelectInput.js
index 9923a9b2a508f3..08a53e468fd972 100644
--- a/packages/material-ui/src/Select/SelectInput.js
+++ b/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}
diff --git a/packages/material-ui/test/integration/Select.test.js b/packages/material-ui/test/integration/Select.test.js
index e396e81914eaa0..f2f8c1d798ebcb 100644
--- a/packages/material-ui/test/integration/Select.test.js
+++ b/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();
diff --git a/test/e2e/fixtures/ClickAwayListener/WithSelect.tsx b/test/e2e/fixtures/ClickAwayListener/WithSelect.tsx
new file mode 100644
index 00000000000000..49fb6cb7857afa
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/test/e2e/index.test.ts b/test/e2e/index.test.ts
index c4acb11bd69cf3..5bb3e5260c9fe8 100644
--- a/test/e2e/index.test.ts
+++ b/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');
+    });
+  });
 });