Element is stay at DOM while popover is closed about react-tiny-popover HOT 7 CLOSED

Just found a solution and it's working well.

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

from react-tiny-popover.

came across the same problem

from react-tiny-popover.

Same thing, same problem, see: #61
Maybe supporting zero transition duration will fix it.
When transitionDuration was introduced we started to experience this problem.

The problem:
Sometimes window.setTimeout does not work, something cancels it, so remove is sometimes not called.

@alexkatz would you be able to fix this problem or at least support zero transition duration?

from react-tiny-popover.

same issue here.

from react-tiny-popover.

Seems to only happen when scrolling at the same time.

from react-tiny-popover.

Same issue here

from react-tiny-popover.

Should be fixed in v6. Here's that same codesandbox updated to v6.0.1.

https://codesandbox.io/s/react-tiny-popover-demo-forked-v7h0n?file=/src/index.js

Closing for now. However, please let me know if you still experience this issue. Thanks guys!

from react-tiny-popover.