CC-959: Hide instead of destroy Tippy instance on disconnect

[danielamorse]

Jira

• https://pegadigitalit.atlassian.net/browse/DS-817
• https://pegadigitalit.atlassian.net/browse/CC-959

Summary

Fixes a rare bug where a Popover/Tooltip inside of a Bolt List (or any other web component) fails to open.

Details

When a Popover/Tooltip is inside another Bolt web component, and that other web component renders after the Popover/Tooltip has rendered, it will trigger the Popover/Tooltip to disconnect. We are currently destroying the Tippy instance on disconnect. When the Popover/Tooltip reconnects, I expected it would reinitialize the Tippy instance, but it does not because the component's firstUpdated() lifecycle event only fires on the initial creation.

Instead of destroying the Tippy instance I am now just hiding it, which solves the original problem we sought to fix in #2513, without creating this other bug.

How to test

• Review code
• Open test page in PL: /pattern-lab/?p=tests-popover-disconnected-callback
• Replace the main Bolt List component JS file (packages/components/bolt-list/index.js) with this:

import { lazyQueue } from '@bolt/lazy-queue';

lazyQueue(['bolt-list'], async () => {
  // This forces the race condition to happen every time (for testing only!)
  setTimeout(async () => {
    await import(/*  webpackChunkName: 'bolt-list' */ './main');
  }, 100);
});

• Verify the Popover/Tooltip still works on the test page.

[adamszalapski]

I can confirm, working as designed.