Popover component overlapping toolbar

[Rishit30G]

Description

When we try to insert a block using / (backslash) and start typing, the popover component is below the text as the results are more but as soon as the results become less the popover component moves up and overlaps the toolbar component which does not look good on the UI

My suggestion would be to keep remove the toolbar option when the popover component is active, so that we don't encounter this problem Would like others to chime in and share their opinion on this 🙇

Step-by-step reproduction instructions

• Create a new post
• Add a new block using /
• Notice the popover component goes above text when the results become less
• Hover over the text
• Notice how the popover component appears over toolbar component

Screenshots, screen recording, code snippet

https://github.com/user-attachments/assets/73d5a90f-f0ea-49d3-9d48-030b69d486f5

Environment info

• WordPress 6.7
• Gutenberg 18.9
• MacOS Sonoma 14.5

Please confirm that you have searched existing issues in the repo.

• [X] Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• [X] Yes

[stokesman]

I wonder if this has been discussed before. I’d suppose it’s mostly overlooked because the expectation that one completes the use of the menu before moving the pointer.

I think for starters the placement of the popover isn’t right. It is specified as "top-start", i.e. to be placed above the rich text area if space permits. In the scenario demonstrated, that’s what causes the flip upward once the results are few enough that the popover fits above. If instead, it is specified as "bottom-start" to be placed below, the menu will stay in place. It seems better to me despite that it would allow the inverse to happen—a tall menu without enough space below will start above and then flip below with fewer options. Here‘s the suggestion in a diff:

diff --git a/packages/components/src/autocomplete/autocompleter-ui.tsx b/packages/components/src/autocomplete/autocompleter-ui.tsx
index c6c1b94deb..d9ad76774b 100644
--- a/packages/components/src/autocomplete/autocompleter-ui.tsx
+++ b/packages/components/src/autocomplete/autocompleter-ui.tsx
@@ -179,7 +179,7 @@ export function getAutoCompleterUI( autocompleter: WPCompleter ) {
                <Popover
                    focusOnMount={ false }
                    onClose={ onReset }
-                   placement="top-start"
+                   placement="bottom-start"
                    className="components-autocomplete__popover"
                    anchor={ popoverAnchor }
                    ref={ popoverRefs }