request - close popover when clicked inside

[ravijaiswal7]

Recently we came across a use case where i am using button inside the popover. I am using that button to duplicate a tab as it works in chrome. but the new tab which is created has popover in a open state. so i would request to have a functionality to close the popover on click inside the child component.

[ever-dev]

You can try as follows

import Popover, { PopoverProps } from "react-tiny-popover";

interface ContentProps {
  closePopup: () => any;
}

interface ClickoverProps {
  Content: FunctionComponent<ContentProps>;
  hideOnOutsideClick?: boolean;
  align?: PopoverProps["align"];
  padding?: number;
  position?: PopoverProps["position"];
  onVisibleChange?: (changed: boolean) => any;
}

export const Clickover: FunctionComponent<ClickoverProps> = ({
  Content,
  position = "bottom",
  align = "end",
  padding = 0,
  hideOnOutsideClick = true,
  children,
  onVisibleChange
}) => {
  const [visible, setVisible] = useState(false);

  return (
    <Popover
      content={() => (
        <div css={styles.popup} onClick={e => e.stopPropagation()}>
          <Content
            closePopup={() => {
              setVisible(false);
              onVisibleChange && onVisibleChange(false);
            }}
          />
        </div>
      )}
      isOpen={visible}
      onClickOutside={() => {
        hideOnOutsideClick && setVisible(false);
        onVisibleChange && onVisibleChange(false);
      }}
      windowBorderPadding={40}
      padding={padding}
      position={position}
      align={align}
    >
      <div
        onClick={() => {
          onVisibleChange && onVisibleChange(!visible);
          setVisible(!visible);
        }}
      >
        {children}
      </div>
    </Popover>
  );
};