Tippyjs: Interactive tippy stays open after content loses focus

[KubaJastrz]

Bug description

Tippy with this configuration opens up correctly when tabbing in from reference element and allows me to focus onto the interactive element but it after the focus goes to the next interactive element in the DOM, the Tippy stays open.

<div>
    <Tippy
        content={<button>interactive</button>}
        interactive
    >
        <button>reference</button>
    </Tippy>
</div>
<button>not tippy</button>

(the <div> arround Tippy is to prevent the interactive warning, but I'm not sure if I'm doing this correctly)

https://user-images.githubusercontent.com/6443113/106893662-2b525e00-66ee-11eb-9da4-6ee1256e32d1.mp4

Reproduction

https://codesandbox.io/s/affectionate-cray-4yee8?file=/src/App.js

[KubaJastrz]

I've created a simple workaround with wrapper around the content and onBlur prop: https://codesandbox.io/s/tippy-repro-fix-e021c?file=/src/App.js

IMHO, this could just be a part of tippy default behavior itself, but if you think otherwise, feel free to close this.

[atomiks]

It's not default because of clipboard hacks being used a while back iirc, https://atomiks.github.io/tippyjs/v6/plugins/#hideonpopperblur

[KubaJastrz]

Thanks @atomiks. I've switched to use the plugin approach instead.

I also went with your recommendation, since document.activeElement is buggy when using it with built-in screen reader on Windows for some reason. event.relatedTarget works much better.