Filter Field Autocomplete Panel appears above page header

[anntr]

Bug Report

Expected Behavior

autocomplete panel should not overlay sticky header

Current Behavior

autocomplete panel overlays sticky header

Steps to Reproduce

https://stackblitz.com/edit/github-denej4?file=src/app/app.component.html

1. Expand the panel by click in Filter by input
2. With panel expanded, scroll up

Context (Environment)

I can see in Stackblitz that the dt-autocomplete-panel is rendered inside cdk-overlay-container, cdk-overlay-container is rendered outside the app root and has z-index: 1000 thus covering everything.

Exactly same issue was reported and fixed in #451.

Is Stackblitz example valid and something might have broken in Barista after #451 fix?
Do I miss something in the Stackblitz example that would make the dt-autocomplete-panel overlay respect fixed header positioning?

Used Versions:

• angular: 10.1.6
• @angular/cdk: 10.2.5
• @dynatrace/barista-components: 8.1.2

[anntr]

I tried to investigate the issue and prepare a fix. I hope that you can push me in the right direction.

I've noticed that the Strategy used for popup positioning is relying only on viewport position, unaware of any sticky elements positioning. I've tried to use DtViewportResizer instead of ViewportRuler as their interfaces are very similar. I had created StickyHeaderAwareViewport which updates its offset top position after the header renders and injected it instead of DtViewportResizer.
Positioning Strategy is now aware of the header offset, treats my own injected viewport as the actual viewport but still closes the popup only when part of it is outside the browser visible area. I suspect that there might be a problem with getOverlayFit() as isCompletelyWithinViewport is true when it touches the header but should be false.

Is this own viewport implementation idea the right approach here?
This bug is getting urgent, we have several tickets regarding this issue from different teams and I'd like to help to fix this in Barista.

[ffriedl89]

@anntr Thx for helping out with the investigation. I've done a deeper dive just right now to figure out what is going on. The issue that I see is that the filter field / autocomplete does not set the viewportMargin on the DtFlexibleConnectedPositionStrategy. Therefore the viewport margin is always 0 since we default back to it. It should be enough to do the same thing as in the selection-area.
If we take the viewportResizers offset stream and provide the values to the positionstrategy similar to the selection-area, the viewport margin should be taken into account. I'll try to get a fix done since this is quite urgent and I am already quite deep down the rabbit hole.