UI Overlap and State Persistence in Filter Menus

[Bonapara]

Current Behavior

The sub-filter/filter type menu opens over the Filter menu, hiding it.

CleanShot.2024-06-18.at.11.39.15.mp4

When closing the sub-filter/filter type menu by clicking outside, it remains in memory when opening another filter.

CleanShot.2024-06-18.at.11.40.28.mp4

There is a double border between the sub-filter/filter type menu:

Desired Behavior

We should display the sub-filter/filter type menu above and slightly to the side of the filter menu so the filter menu remains visible underneath. We should reinitialize the display when closing the sub-filter/filter type menu.

Get rid of the double border

Figma

https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=33469-192820&t=jqRWyAJosBHzOW0I-11

[greptile-apps]

To resolve the UI overlap and state persistence issues in the filter menus, follow these steps:

1. Adjust Positioning:

   • In MultipleFiltersDropdownContent.tsx, modify the positioning logic to display the sub-filter/filter type menu above and slightly to the side of the filter menu.

   // Example adjustment
   const subFilterMenuStyle = {
     position: 'absolute',
     top: '10px', // Adjust as needed
     left: 'calc(100% + 10px)', // Adjust as needed
     zIndex: 1000,
   };

2. State Management:

   • In useFilterDropdown.ts, ensure the state is reset when the sub-filter/filter type menu is closed.

   // Example state reset logic
   const closeSubFilterMenu = () => {
     setSubFilterMenuOpen(false);
     setSubFilterMenuState(initialState); // Reset state
   };

3. Remove Double Border:

   • In DropdownMenu.tsx, adjust the CSS to remove the double border.

   // Example CSS adjustment
   const dropdownMenuStyle = {
     border: 'none', // Remove existing border
     boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)', // Add shadow if needed
   };

These changes should address the UI overlap, state persistence, and double border issues.

References

[rksingh2001]

Can I get assigned to this @Bonapara ?

[Bonapara]

Sure @rksingh2001, thanks for contributing!