Dropdowns cannot be positioned against slotted content

[ashleyryan]

Describe the bug

A dropdown can only be positioned against a slotted position after the initial render has finished. If a dropdown has an input inside of a cds-input as it's anchor, for example, it will be positioned correctly if it starts out hidden.

If it's rendered to the page without the hidden attribute, however, it's not positioned correctly because of a race condition where the input hasn't been rendered in the slot yet.

How to reproduce

https://stackblitz.com/edit/clarity-typescript-demo-j9ltpp?file=src%2Findex.html,src%2Findex.ts

Expected behavior

The dropdown would be positioned below the input.

Versions

Clarity project:

• [x] Clarity Core
• [ ] Clarity Angular/UI

Clarity version:

• [ ] v5.x
• [x] v6.x

Other

I believe the fix is to add some sort of mutation/intersection observer on the anchor into setUpPositioningObserver in the popup class. Something like the following appears to work but I'm not sure what other implications there are of that:

this.observers.push(
        elementVisible(this.anchorElement!, () => {
          setPopupPosition(this);
        })
      );