Interactive Tippys don't close when tabbed with keyboard

[ghost]

See this gif:

Is that normal behaviour?

I wrapped the elements in it's own div:

            <div>
                <button id="social-share-button" class="sp-header-button">
                    <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="share-square"
                         class="svg-inline--fa fa-share-square fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg"
                         viewBox="0 0 576 512">
                        <path fill="currentColor"
                              d="M568.482 177.448L424.479 313.433C409.3 327.768 384 317.14 384 295.985v-71.963c-144.575.97-205.566 35.113-164.775 171.353 4.483 14.973-12.846 26.567-25.006 17.33C155.252 383.105 120 326.488 120 269.339c0-143.937 117.599-172.5 264-173.312V24.012c0-21.174 25.317-31.768 40.479-17.448l144.003 135.988c10.02 9.463 10.028 25.425 0 34.896zM384 379.128V448H64V128h50.916a11.99 11.99 0 0 0 8.648-3.693c14.953-15.568 32.237-27.89 51.014-37.676C185.708 80.83 181.584 64 169.033 64H48C21.49 64 0 85.49 0 112v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48v-88.806c0-8.288-8.197-14.066-16.011-11.302a71.83 71.83 0 0 1-34.189 3.377c-7.27-1.046-13.8 4.514-13.8 11.859z"></path>
                    </svg>
                </button>
                <div id="social-share" class="sp-menu-tippy" style="display: none;">
                    <a tabindex="0">Facebook</a>
                    <a tabindex="0">Instagram</a>
                    <a tabindex="0">WhatsApp</a>
                </div>
            </div>

And calling the tippy:

    function attachTippy(selector, target) {
        const content = document.querySelector(target);
        content.style.display = 'block';

        tippy(selector, {
            content: content,
            allowHTML: true,
            theme: tippyTheme,
            interactive: true,
        });
    }

    let tippySocial = document.querySelector('#social-share-button');
    if (tippySocial) {
        attachTippy('#social-share-button', '#social-share');
    }

Am I doing something wrong here?

Thanks in advance!

[atomiks]

You aren't doing anything wrong, this just isn't baked in by default, because IIRC people were doing some clipboard hacks that blurred the popper and hid it, even if they didn't intend for that. So you need to explicitly enable the behavior:

https://atomiks.github.io/tippyjs/v6/plugins/#hideonpopperblur

[ghost]

Nice, thanks! I love tippys extensibility and used your linked plugin for now.

Are there any accessibility issues I should regard when implementing this?

[atomiks]

Not that I'm aware of

[ghost]

Cool thanks!