From 18b2e2b7484b5b65d34d53101cde3313af2beebe Mon Sep 17 00:00:00 2001
From: "Cao Z.H" <150761799+CzhCN0@users.noreply.github.com>
Date: Sat, 16 Dec 2023 04:39:17 +0800
Subject: [PATCH] Fix: keep the filter edition open if it is empty (#2986)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 曹志浩 <caozhihao@quyiyuan.com>
Co-authored-by: Charles Bochet <charles@twenty.com>
---
 .../views/components/EditableFilterDropdownButton.tsx  | 10 +++++++++-
 .../src/modules/views/hooks/internal/useViewFilters.ts |  5 -----
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/twenty-front/src/modules/views/components/EditableFilterDropdownButton.tsx b/packages/twenty-front/src/modules/views/components/EditableFilterDropdownButton.tsx
index ac41b7baf..733aa1f4b 100644
--- a/packages/twenty-front/src/modules/views/components/EditableFilterDropdownButton.tsx
+++ b/packages/twenty-front/src/modules/views/components/EditableFilterDropdownButton.tsx
@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 
 import { MultipleFiltersDropdownContent } from '@/object-record/object-filter-dropdown/components/MultipleFiltersDropdownContent';
 import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
@@ -61,6 +61,13 @@ export const EditableFilterDropdownButton = ({
     removeViewFilter(viewFilter.fieldMetadataId);
   };
 
+  const handleDropdownClickOutside = useCallback(() => {
+    const { value, fieldMetadataId } = viewFilter;
+    if (!value) {
+      removeViewFilter(fieldMetadataId);
+    }
+  }, [viewFilter, removeViewFilter]);
+
   return (
     <Dropdown
       clickableComponent={
@@ -74,6 +81,7 @@ export const EditableFilterDropdownButton = ({
       dropdownHotkeyScope={hotkeyScope}
       dropdownOffset={{ y: 8, x: 0 }}
       dropdownPlacement="bottom-start"
+      onClickOutside={handleDropdownClickOutside}
     />
   );
 };
diff --git a/packages/twenty-front/src/modules/views/hooks/internal/useViewFilters.ts b/packages/twenty-front/src/modules/views/hooks/internal/useViewFilters.ts
index 2d3d00899..9107a8f3f 100644
--- a/packages/twenty-front/src/modules/views/hooks/internal/useViewFilters.ts
+++ b/packages/twenty-front/src/modules/views/hooks/internal/useViewFilters.ts
@@ -209,11 +209,6 @@ export const useViewFilters = (viewScopeId: string) => {
               return filtersDraft;
             }
 
-            if (filterToUpsert.value === '') {
-              filtersDraft.splice(existingFilterIndex, 1);
-              return filtersDraft;
-            }
-
             filtersDraft[existingFilterIndex] = {
               ...filterToUpsert,
               id: existingSavedFilterId,