Outsideclick is not working

[amitsingh-quotient]

I have implemented popover on a modal that is created using react portals. The issue is i am not able to close popover when clicked outside. Below is the code.

<Popover
      isOpen={isPopoverOpen}
      onClickOutside={() => setIsPopoverOpen(false)}
      positions={['right', 'bottom', 'top']} // preferred positions by priority
      content={({ position, childRect, popoverRect }) => (
        <ArrowContainer // if you'd like an arrow, you can import the ArrowContainer!
        position={position}
        childRect={childRect}
        popoverRect={popoverRect}
        arrowColor={'white'}
        arrowSize={15}
        arrowStyle={{ opacity: 1 }}>some content</ArrowContainer>
      )}>
      <button
        aria-haspopup="true"
        style={{
          border: '1px solid #cccccc',
          width: '35px',
          borderRadius: '99px',
          height: '35px',
          textAlign: 'center',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          padding: '5px',
          backgroundColor: 'white'
        }}
        onClick={handleShareClick}>
        <img src="/share-icon.png" alt="share" height="30" width="30" />
      </button>
    </Popover>

Below is attched screenshot

Also sometimes i am not able to see the popover when i reopen the modal.

[gabriel-dehan]

Having the same issue, solution so far has been to handle the click outside myself with the ref being a div surrounding the popover.

Also, you need to set the "outside click" event handler to the portal and not to the document, and do it post portal rendering.

Example:
Portal setup:

// When creating portal:
 const div = document.createElement('div');
 div.classList.add('portal');
// ...

Outer click hook

// useOuterClick hook

import { useEffect, useRef } from 'react';

export const useOuterClick = (callback: (e: CustomEvent) => void) => {
  const innerRef = useRef<HTMLDivElement | null>(null);
  const callbackRef = useRef<(e: CustomEvent) => void>();

  // set current callback in ref, before second useEffect uses it
  useEffect(() => {
    // useEffect wrapper to be safe for concurrent mode
    callbackRef.current = callback;
  });

  useEffect(() => {
    // Target closest portal if there is one, otherwise the event handler is ignored in portals
    const rootEl = innerRef.current?.closest('.portal') || document;

    rootEl.addEventListener('click', handleClick as EventListener);
    return () =>
      rootEl.removeEventListener('click', handleClick as EventListener);

    // read most recent callback and innerRef dom node from refs
    function handleClick(e: CustomEvent) {
      if (
        e?.target &&
        innerRef.current &&
        callbackRef.current &&
        !innerRef.current.contains(e.target as Node)
      ) {
        callbackRef.current(e);
      }
    }
  }, []); // no need for callback + innerRef dep

  return innerRef; // return ref; client can omit `useRef`
};

When setting up the popover

const innerRef = useOuterClick(() => console.log('it works'));

return (
  <div ref={innerRef}>
    <Popover />
  </div>
)

Could definitely find a way to handle it in the library if the lib searched for the closest portal instead of setting the outside click event handler on the document.
For now this should suffice if you come across the issue though :)

[Aeners]

Thanks @gabriel-dehan, just saved me hours of painful search.
Still would be nice to be able to handle it with the lib, but your solution did the trick.
You made my day 🍾