[ClickAwayListener] Fix support of leading edge

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>
+  );
+}

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>
+  );
+}

docs/src/pages/components/click-away-listener/click-away-listener.md

@@ -24,3 +24,10 @@ 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"}}

packages/material-ui/src/ClickAwayListener/ClickAwayListener.js

@@ -10,6 +10,13 @@ function mapEventPropToEvent(eventProp) {
   return eventProp.substring(2).toLowerCase();
 }
 
+function hasClickedScrollbar(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 || hasClickedScrollbar(event)) {
       return;
     }