Bug: "Clear" button unmounts on click faster than other components, causing popover issue

[getaaron]

This is a bug report against the latest version of react-select 3.1.0, when placed inside a react-bootstrap Popover.

Code sandbox here: https://codesandbox.io/s/react-select-v3-popover-clear-issue-98lvm?file=/example.js

Reproduction steps:

1. Open the sandbox
2. Click "Show Popover"
3. Select some options
4. Click the "Clear" button

Expected Behavior

The elements clear and the popover stays open.

Actual Behavior

The elements clear and the popover closes.

Notes

This effect allows the user to close the popover by clicking outside of it:

  useEffect(() => {
    const handleOutsideClick = (e) => {
      if (
        (target.current && target.current.contains(e.target)) ||
        (popRef.current && popRef.current.contains(e.target))
      ) {
        return;
      }
      setShow(false);
    };

    if (show) {
      document.addEventListener("mousedown", handleOutsideClick);
    }
    return () => {
      document.removeEventListener("mousedown", handleOutsideClick);
    };
  }, [show, popRef]);

In the case of all other clicks (like clicking an option, or the react-select dropdown arrow), this works fine.

In the case of the clear button, e.target is set to some DOM element that is not contained within popRef.

I think this is a bug in react-select because I believe all clicks should be handled the same way.

In addition to a fix, I'd love any suggestions of a temporary workaround.

[bladey]

Thanks for the detailed report @getaaron, we'll look in this soon.

[Rall3n]

It is not so much a bug as something like a race condition.

It does not not render outside of the correct DOM hierarchy.
The target element is just unmounted faster than your event handler on the document can fire.

[getaaron]

It is not so much a bug as something like a race condition.

It does not not render outside of the correct DOM hierarchy.

The target element is just unmounted faster than your event handler on the document can fire.

Ok, that seems plausible. So why does this happen reliably 100% of the time for the clear button, and never for the other clicks? What's different?

[getaaron]

I think this may be related to #532

[ebonow]

Greetings @getaaron ,

I come bearing a 1 line solution and learned a bit more about the event object as this should allow you to compare the DOM hierarchy at the time of mouseDown instead of at the time of the useEffect callback.

Working demo here

e.composedPath().includes(popRef.current)

For more information about composedPath you can visit here:
https://developer.mozilla.org/en-US/docs/Web/API/Event/composedPath
https://caniuse.com/?search=composedPath

This all said, the core functionality of react-select does not seem to be operating in a way that I would consider a "bug". Perhaps it is different than other clickable items for various reasons and perhaps there may be performance improvements to be gained, but the underlying cause of the issues seems to be more related to the useEffect callback method in the example you provided.

I appreciate your feedback and investigation into the root cause. This appears to resolve your use case so I will mark this as closed, but I can re-open this if necessary.