Skip to content

Commit

Permalink
fix: App title drop down close on interaction with other components. (#…
Browse files Browse the repository at this point in the history
…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 -->
  • Loading branch information
saicharan-zemoso authored Oct 9, 2024
1 parent 41d5ce7 commit 4c58a98
Showing 1 changed file with 5 additions and 2 deletions.
7 changes: 5 additions & 2 deletions app/client/src/pages/Editor/EditorName/NavigationMenu.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from "react";
import React, { useCallback } from "react";

import type { noop } from "lodash";

Expand All @@ -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
Expand Down

0 comments on commit 4c58a98

Please sign in to comment.