diff --git a/docs/src/pages/components/click-away-listener/LeadingClickAway.js b/docs/src/pages/components/click-away-listener/LeadingClickAway.js
new file mode 100644
index 00000000000000..c25cbc7495dbfb
--- /dev/null
+++ b/docs/src/pages/components/click-away-listener/LeadingClickAway.js
@@ -0,0 +1,51 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import ClickAwayListener from '@material-ui/core/ClickAwayListener';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    position: 'relative',
+  },
+  dropdown: {
+    position: 'absolute',
+    top: 28,
+    right: 0,
+    left: 0,
+    zIndex: 1,
+    border: '1px solid',
+    padding: theme.spacing(1),
+    backgroundColor: theme.palette.background.paper,
+  },
+}));
+
+export default function LeadingClickAway() {
+  const classes = useStyles();
+  const [open, setOpen] = React.useState(false);
+
+  const handleClick = () => {
+    setOpen((prev) => !prev);
+  };
+
+  const handleClickAway = () => {
+    setOpen(false);
+  };
+
+  return (
+    <ClickAwayListener
+      mouseEvent="onMouseDown"
+      touchEvent="onTouchStart"
+      onClickAway={handleClickAway}
+    >
+      <div className={classes.root}>
+        <button type="button" onClick={handleClick}>
+          Open menu dropdown
+        </button>
+        {open ? (
+          <div className={classes.dropdown}>
+            Click me, I will stay visible until you click outside.
+          </div>
+        ) : null}
+      </div>
+    </ClickAwayListener>
+  );
+}
diff --git a/docs/src/pages/components/click-away-listener/LeadingClickAway.tsx b/docs/src/pages/components/click-away-listener/LeadingClickAway.tsx
new file mode 100644
index 00000000000000..ea92116e3419d8
--- /dev/null
+++ b/docs/src/pages/components/click-away-listener/LeadingClickAway.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import ClickAwayListener from '@material-ui/core/ClickAwayListener';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      position: 'relative',
+    },
+    dropdown: {
+      position: 'absolute',
+      top: 28,
+      right: 0,
+      left: 0,
+      zIndex: 1,
+      border: '1px solid',
+      padding: theme.spacing(1),
+      backgroundColor: theme.palette.background.paper,
+    },
+  }),
+);
+
+export default function LeadingClickAway() {
+  const classes = useStyles();
+  const [open, setOpen] = React.useState(false);
+
+  const handleClick = () => {
+    setOpen((prev) => !prev);
+  };
+
+  const handleClickAway = () => {
+    setOpen(false);
+  };
+
+  return (
+    <ClickAwayListener
+      mouseEvent="onMouseDown"
+      touchEvent="onTouchStart"
+      onClickAway={handleClickAway}
+    >
+      <div className={classes.root}>
+        <button type="button" onClick={handleClick}>
+          Open menu dropdown
+        </button>
+        {open ? (
+          <div className={classes.dropdown}>
+            Click me, I will stay visible until you click outside.
+          </div>
+        ) : null}
+      </div>
+    </ClickAwayListener>
+  );
+}
diff --git a/docs/src/pages/components/click-away-listener/click-away-listener.md b/docs/src/pages/components/click-away-listener/click-away-listener.md
index a73e46fe4a7842..7c7f0fe1a580b3 100644
--- a/docs/src/pages/components/click-away-listener/click-away-listener.md
+++ b/docs/src/pages/components/click-away-listener/click-away-listener.md
@@ -24,3 +24,12 @@ You can find a more advanced demo on the [Menu documentation section](/component
 The following demo uses [`Portal`](/components/portal/) to render the dropdown into a new "subtree" outside of current DOM hierarchy.
 
 {{"demo": "pages/components/click-away-listener/PortalClickAway.js"}}
+
+## Leading edge
+
+By default, the component responds to the trailing events (click + touch end).
+However, you can configure it to respond to the leading events (mouse down + touch start).
+
+{{"demo": "pages/components/click-away-listener/LeadingClickAway.js"}}
+
+> ⚠️ In this mode, only interactions on the scrollbar of the document is ignored.
diff --git a/packages/material-ui/src/ClickAwayListener/ClickAwayListener.js b/packages/material-ui/src/ClickAwayListener/ClickAwayListener.js
index f21becace8739e..5b8d6b91ccf736 100644
--- a/packages/material-ui/src/ClickAwayListener/ClickAwayListener.js
+++ b/packages/material-ui/src/ClickAwayListener/ClickAwayListener.js
@@ -10,6 +10,13 @@ function mapEventPropToEvent(eventProp) {
   return eventProp.substring(2).toLowerCase();
 }
 
+function clickedRootScrollbar(event) {
+  return (
+    document.documentElement.clientWidth < event.clientX ||
+    document.documentElement.clientHeight < event.clientY
+  );
+}
+
 /**
  * Listen for click events that occur somewhere in the document, outside of the element itself.
  * For instance, if you need to hide a menu when people click anywhere else on your page.
@@ -55,7 +62,8 @@ function ClickAwayListener(props) {
 
     // 1. IE 11 support, which trigger the handleClickAway even after the unbind
     // 2. The child might render null.
-    if (!mountedRef.current || !nodeRef.current) {
+    // 3. Behave like a blur listener.
+    if (!mountedRef.current || !nodeRef.current || clickedRootScrollbar(event)) {
       return;
     }