UI Overlap and State Persistence in Filter Menus

[Bonapara]

Current Behavior

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

https://github.com/twentyhq/twenty/assets/19412894/dbf8b939-c2a2-4e14-a6ae-99add05ce2f8

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

https://github.com/twentyhq/twenty/assets/19412894/13cc8a41-a4c6-4c14-b244-f271f02e4291

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[bot]]

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!