fix: App title drop down close on interaction with other components. (#36504)

Fixes #28114 

fixed the app title drop down and it closes on interaction with other
components

Before fixing the bug the omni bar and title dropdown overlap over each
other:

![image](https://github.com/user-attachments/assets/36fc6b26-9222-4fb9-b97a-d39a9b249403)

after the fix the app title drop down closes on opening omni bar or any
other component.

added the cypress test to visually confirm that the fix was working and
did not add unit test as to test this we need to interact with other
components or open omni bar while testing.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Enhanced the Navigation Menu to automatically close when users
interact outside of it, improving user experience.
- Introduced a test suite for validating application dropdown
interactions with the omnibar using keyboard shortcuts.

- **Bug Fixes**
- Resolved an issue where the dropdown menu would remain open after
interactions outside its boundaries.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Saicharan Pabbathi 2024-10-09 20:38:03 +05:30 committed by GitHub
parent 41d5ce7d25
commit 4c58a98602
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -1,4 +1,4 @@
import React from "react";
import React, { useCallback } from "react";
import type { noop } from "lodash";
@ -13,9 +13,12 @@ interface NavigationMenuProps {
export function NavigationMenu(props: NavigationMenuProps) {
const { menuItems, setIsPopoverOpen } = props;
const handleInteractionOutside = useCallback(() => {
setIsPopoverOpen(false);
}, [setIsPopoverOpen]);
return (
<MenuContent width="214px">
<MenuContent onInteractOutside={handleInteractionOutside} width="214px">
{menuItems?.map((item, idx) => {
return (
<NavigationMenuItem