diff --git a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerCreateOrEditContent.tsx b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerCreateOrEditContent.tsx
index 0b9d39e86..b57dc8128 100644
--- a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerCreateOrEditContent.tsx
+++ b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerCreateOrEditContent.tsx
@@ -102,11 +102,18 @@ export const ViewPickerCreateOrEditContent = () => {
const { availableFieldsForKanban } = useGetAvailableFieldsForKanban();
+ const handleClose = async () => {
+ if (viewPickerMode === 'edit') {
+ await handleUpdate();
+ }
+ setViewPickerMode('list');
+ };
+
return (
<>
setViewPickerMode('list')}
+ onClick={handleClose}
>
{viewPickerMode === 'create' ? 'Create view' : 'Edit view'}
diff --git a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerDropdown.tsx b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerDropdown.tsx
index 59b347f1b..b46b94416 100644
--- a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerDropdown.tsx
+++ b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerDropdown.tsx
@@ -15,6 +15,7 @@ import { ViewPickerCreateOrEditContentEffect } from '@/views/view-picker/compone
import { ViewPickerListContent } from '@/views/view-picker/components/ViewPickerListContent';
import { VIEW_PICKER_DROPDOWN_ID } from '@/views/view-picker/constants/ViewPickerDropdownId';
import { useViewPickerMode } from '@/views/view-picker/hooks/useViewPickerMode';
+import { useViewPickerPersistView } from '@/views/view-picker/hooks/useViewPickerPersistView';
import { useViewStates } from '../../hooks/internal/useViewStates';
@@ -49,6 +50,8 @@ export const ViewPickerDropdown = () => {
const { currentViewWithCombinedFiltersAndSorts } = useGetCurrentView();
+ const { handleUpdate } = useViewPickerPersistView();
+
const entityCountInCurrentView = useRecoilValue(
entityCountInCurrentViewState,
);
@@ -62,13 +65,20 @@ export const ViewPickerDropdown = () => {
const { getIcon } = useIcons();
const CurrentViewIcon = getIcon(currentViewWithCombinedFiltersAndSorts?.icon);
+ const handleClickOutside = async () => {
+ if (isViewsListDropdownOpen && viewPickerMode === 'edit') {
+ await handleUpdate();
+ }
+ setViewPickerMode('list');
+ };
+
return (
setViewPickerMode('list')}
+ onClickOutside={handleClickOutside}
clickableComponent={
{currentViewWithCombinedFiltersAndSorts && CurrentViewIcon ? (
diff --git a/packages/twenty-front/src/modules/views/view-picker/hooks/useViewPickerPersistView.ts b/packages/twenty-front/src/modules/views/view-picker/hooks/useViewPickerPersistView.ts
index 825e46c36..42ef7c2db 100644
--- a/packages/twenty-front/src/modules/views/view-picker/hooks/useViewPickerPersistView.ts
+++ b/packages/twenty-front/src/modules/views/view-picker/hooks/useViewPickerPersistView.ts
@@ -61,6 +61,7 @@ export const useViewPickerPersistView = () => {
({ set, snapshot }) =>
async () => {
set(viewPickerIsPersistingState, true);
+ closeAndResetViewPicker();
const viewPickerReferenceViewId = getSnapshotValue(
snapshot,
viewPickerReferenceViewIdState,
@@ -72,7 +73,6 @@ export const useViewPickerPersistView = () => {
)[0].id,
);
await removeView(viewPickerReferenceViewId);
- closeAndResetViewPicker();
},
[
closeAndResetViewPicker,
@@ -88,6 +88,7 @@ export const useViewPickerPersistView = () => {
({ set, snapshot }) =>
async () => {
set(viewPickerIsPersistingState, true);
+ closeAndResetViewPicker();
const viewPickerReferenceViewId = getSnapshotValue(
snapshot,
@@ -108,7 +109,6 @@ export const useViewPickerPersistView = () => {
icon: viewPickerSelectedIcon,
});
selectView(viewPickerReferenceViewId);
- closeAndResetViewPicker();
},
[
viewPickerIsPersistingState,