Bug - SearchInput - breaking change in advanced filter's panel-based popover; positioning is no longer absolute

[garrett]

When attempting to upgrade to the latest release of PatternFly, we spotted an issue due to failing tests. It appears to be related to this PR, as it changes the previous widgets used from HTML to the PF Panel component. Previously, it used the pf-c-search-input__menu class, but now it uses these classes: pf-c-panel pf-m-raised pf-c-search-input__menu.

However, pf-c-panel makes the popover position: relative now, instead of position: absolute and the width of the popover is now auto instead of being 100% wide.

As a result of the changes, the panel popover for the advanced filter still reserves the space in the toolbar, causing a layout shift when it appears, which looks like this:

(You can see the panel below the toolbar still... but as it's relative positioning instead of absolute, it now affects the flow of the content in the toolbar.)

Originally posted by @garrett in #7414 (comment)

[garrett]

For reference, it's supposed to look like this:

[nicolethoen]

@garrett is your SearchInput component rendering it wrapped in a <div class="pf-c-search-input">...</div>?

This is definitely a bug and we will look at it, but I think that wrapper will cause it to behave more like the example here. It's the pf-c-search-input__menu class without the pf-c-search-input wrapper which would cause that positioning behavior (I think).