ClickAwayListener doesn't fire when clicking on a link/button to navigate to other route

ClickAwayListener component works by attaching the event listener to the document, when a mouse event fires, it fires onClickAway only when the mouse event is not inside the element.

The Link component from react-router-dom essentially renders something like this:

<a onClick={() => navigate()}>click</a>

When you click the link and call navigate(), React unmounts the current component and mounts the next page component in the next frame. But the thing is, document handlers are only processed after the next re-render, at that point, the event handler from the ClickAwayListener had already been removed since it was unmounted, so nothing get called.

The problem can be solved by waiting until after the next re-render when the handlers from document have been called.

<button
  onClick={() => {
    setTimeout(() => {
      history.push("/2");
    });
  }}
>

Live Demo

An issue related to your question was opened in September 2019 in the Material UI repository where the Clickawaylistener doesn't fire for both buttons and links. However as recently as May 2020, the issue does not appear to have been adequately addressed. I recommend opening a new issue in the repository to confirm that this isn't a bug as it relates to buttons.

As a potential workaround in the meantime, and depending on your use case, you could either use a <Link> or <Button> component with an onClick prop:

import React from "react";
import ClickAwayListener from "@material-ui/core/ClickAwayListener";
import { Link, useHistory } from "react-router-dom";
import Button from "@material-ui/core/Button";

export default function Home() {
  let history = useHistory();

  const handleClickAway = () => {
    console.log("Clicked Away");
  };

  function handleClick() {
    handleClickAway();
    history.push("/about");
  }

  return (
    <div>
      <Link to="/about" onClick={handleClickAway}>
        Link
      </Link>
      <Button type="button" onClick={handleClick}>
        Button
      </Button>
      <ClickAwayListener onClickAway={handleClickAway}>
        <div>Home Page</div>
      </ClickAwayListener>
    </div>
  );
}

I've also included a working example on Codesandbox.

In the issue that Tejogol linked, a commenter recommended use of these props on the ClickAwayListener component, as it allows the component to catch the touch event at its start, before the link does.

<ClickAwayListener mouseEvent="onMouseDown" touchEvent="onTouchStart">

I was having the same issue as you, and this worked for me! It was also the least intrusive, as I didn't want to mess with my react-router-dom code.

I was able to solve this issue by using this function instead of the material-ui ClickAwayListener: https://github.com/streamich/react-use/blob/master/src/useClickAway.ts

import { RefObject, useEffect, useRef } from 'react';
import { off, on } from './util';

const defaultEvents = ['mousedown', 'touchstart'];

const useClickAway = <E extends Event = Event>(
  ref: RefObject<HTMLElement | null>,
  onClickAway: (event: E) => void,
  events: string[] = defaultEvents
) => {
  const savedCallback = useRef(onClickAway);
  useEffect(() => {
    savedCallback.current = onClickAway;
  }, [onClickAway]);
  useEffect(() => {
    const handler = (event) => {
      const { current: el } = ref;
      el && !el.contains(event.target) && savedCallback.current(event);
    };
    for (const eventName of events) {
      on(document, eventName, handler);
    }
    return () => {
      for (const eventName of events) {
        off(document, eventName, handler);
      }
    };
  }, [events, ref]);
};

export default useClickAway;

I didn't want to import the library as a dependency so I created a hook out of this code and copied the util functions into it

const on = (obj: any, ...args: any[]) => obj.addEventListener(...args);
const off = (obj: any, ...args: any[]) => obj.removeEventListener(...args);

An example of the hook in use is provided here: https://streamich.github.io/react-use/?path=/story/ui-useclickaway--demo

Most of the answers here offer solutions, but none went into detail about why this happened. So this is what I think is happening

At the time I posted this question, I was using React 17. For any React version below 18, there is one "bug" that appears when using addEventListener or any async action like async/await or Promise. This is discussed in GitHub React 18 discussion

You can try out this code in React version below 18 and you should observe similar result

import React, { useState, useEffect } from "react";

export default function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("Test in useEffect " + count);
  });

  useEffect(() => {
    console.log("Another one useEffect");
  });

  useEffect(() => {
    const button = document.getElementById("buttonId");
    button.addEventListener("click", handleClick);
    return () => {
      button.removeEventListener("click", handleClick);
    };
  }, []);

  const handleClick = () => {
    console.log("First print Count is " + count);

    setCount(count + 1);
    setCount(count + 100);
    console.log("Second print Count is " + count);
  };

  return (
    <>
      <div>Count is: {count} </div>
      <button id="buttonId">Click</button>
    </>
  );
}