Bug - v5 alpha testing - Menus & poppers not behaving as expected

[nicolethoen]

HCS is reporting an issue due to the pf popper we're using for type-ahead support

It doesn't like when the Menu is omitted for some reason? Although, the div is always there.
It's happy if I remove the {search && search.length` line below and always output the Menu.
This is done because we don't want to show an empty options menu until the user begins typing.
Without this, the empty menu is shown as soon as the user clicks into the input field.
If I output <></> in place of the menu, the popper also won't error, but shouldn't have to do that?

Also discovered that all our Select components remain open, until you choose an option
Previously, you could click anywhere to dismiss the select

[kmcfaul]

I have been unable to duplicate either issue locally or on the v5 surge. Are there any console errors or warnings occurring?

For the menu with popper, I created a similar example in this codesandbox and tested locally but am not getting any errors with the menu being conditionally rendered. Two possible actions that may help would be to pass the menu and trigger refs to Popper (to remove the wrapping divs which became default), and/or move the logic from only rendering the menu when the input has text (in getMenu) to only opening the menu (Popper's isVisible).

For the deprecated Selects, we haven't updated that for v5 other than minor tweaks (styling and such, nothing that should have impacted the document click handler) and moving it to the deprecated directory. I am unsure what could be preventing the event.

@dlabrecq

[dlabrecq]

I noticed the codesandbox menu items are created via React.useEffect. However, I couldn't nail down the difference between the codesandbox and the HCS UI.

I decided to remove the logic that shows the menu only when the input has text. The focus event should probably open the menu.

Don't know what to say about the Selects, but they are still an issue. Perhaps it would be helpful to debug the UI directly?

I created a draft PR if someone wants to have a look. I can provide creds off-line.
RedHatInsights/hybrid-committed-spend-ui#585

[dlabrecq]

Confirmed the Select components are an issue with Cost Management as well (i.e., they are not closing).

[kmcfaul]

@dlabrecq I think I've found the issue. As part of the event handler updates across the repo the onToggle function for the old Select was also updated, and that is the function that is called when the outside click is triggered. At least in your draft PR, the toggle function is missing the event (should be the first param). Can you try adding the event and seeing if that resolves the menus staying open?

[dlabrecq]

The event handlers needed to be updated for the Select component.

Note that the build never generated a Typescript error. We also didn't encounter any errors in the browser console.

Wondering if this (non-error) could be related to the deprecated import? Our tests fail, specifically due to the Select import -- see #9229

[kmcfaul]

I think there was no Typescript error because the toggle function parameter is implicitly typed in the Perspective, so it may have defaulted to any type which would still be valid when the type changed from boolean to event. But maybe that would still have been caught if the import worked too.