From dc2c2c413c716fdfd10e9ff0f722701d10e4bb8f Mon Sep 17 00:00:00 2001
From: Baptiste Devessier <baptiste@devessier.fr>
Date: Wed, 26 Nov 2025 14:45:05 +0100
Subject: [PATCH] [Workflows] Fix filtering on relative date (#16087)

https://github.com/user-attachments/assets/4079d59e-0550-401f-a29b-b235edd8ed48

Closes https://github.com/twentyhq/twenty/issues/16054
---
 .../components/AdvancedFilterDropdownFilterInput.tsx |  8 ++++++--
 .../components/ObjectFilterDropdownDateInput.tsx     |  9 ++++++++-
 .../components/ObjectFilterDropdownDateTimeInput.tsx |  9 ++++++++-
 .../components/ObjectFilterDropdownFilterInput.tsx   |  4 ++--
 .../hooks/useApplyObjectFilterDropdownOperand.ts     | 12 +++---------
 .../components/RecordCalendarTopBar.tsx              |  1 +
 .../ui/form-types/components/FormDateFieldInput.tsx  |  1 +
 .../form-types/components/FormDateTimeFieldInput.tsx |  1 +
 .../form-types/components/FormRelativeDatePicker.tsx |  4 ++++
 .../modules/ui/field/input/components/DateInput.tsx  |  1 +
 .../ui/field/input/components/DateTimeInput.tsx      |  1 +
 .../internal/date/components/DatePicker.tsx          |  3 +++
 .../internal/date/components/DateTimePicker.tsx      |  3 +++
 .../date/components/RelativeDatePickerHeader.tsx     |  8 +++++---
 .../__stories__/InternalDatePicker.stories.tsx       |  1 +
 .../src/constants/DefaultRelativeDateFilterValue.ts  |  2 +-
 16 files changed, 49 insertions(+), 19 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterDropdownFilterInput.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterDropdownFilterInput.tsx
index 73db3ee004..1708fa1c62 100644
--- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterDropdownFilterInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterDropdownFilterInput.tsx
@@ -49,8 +49,12 @@ export const AdvancedFilterDropdownFilterInput = ({
           <AdvancedFilterDropdownTextInput recordFilter={recordFilter} />
         ))}
       {filterType === 'RATING' && <ObjectFilterDropdownRatingInput />}
-      {filterType === 'DATE_TIME' && <ObjectFilterDropdownDateTimeInput />}
-      {filterType === 'DATE' && <ObjectFilterDropdownDateInput />}
+      {filterType === 'DATE_TIME' && (
+        <ObjectFilterDropdownDateTimeInput instanceId={filterDropdownId} />
+      )}
+      {filterType === 'DATE' && (
+        <ObjectFilterDropdownDateInput instanceId={filterDropdownId} />
+      )}
       {filterType === 'RELATION' && (
         <DropdownContent widthInPixels={GenericDropdownContentWidth.ExtraLarge}>
           <ObjectFilterDropdownSearchInput />
diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownDateInput.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownDateInput.tsx
index c7ba9dd460..0113cc10e1 100644
--- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownDateInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownDateInput.tsx
@@ -24,7 +24,13 @@ import {
 import { dateLocaleState } from '~/localization/states/dateLocaleState';
 import { formatDateString } from '~/utils/string/formatDateString';
 
-export const ObjectFilterDropdownDateInput = () => {
+type ObjectFilterDropdownDateInputProps = {
+  instanceId: string;
+};
+
+export const ObjectFilterDropdownDateInput = ({
+  instanceId,
+}: ObjectFilterDropdownDateInputProps) => {
   const { dateFormat, timeZone } = useContext(UserContext);
   const dateLocale = useRecoilValue(dateLocaleState);
   const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
@@ -109,6 +115,7 @@ export const ObjectFilterDropdownDateInput = () => {
 
   return (
     <DatePicker
+      instanceId={instanceId}
       relativeDate={relativeDate}
       isRelative={isRelativeOperand}
       date={plainDateValue ?? null}
diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownDateTimeInput.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownDateTimeInput.tsx
index 1e41dc0680..a16195c2f2 100644
--- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownDateTimeInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownDateTimeInput.tsx
@@ -24,7 +24,13 @@ import {
 import { dateLocaleState } from '~/localization/states/dateLocaleState';
 import { formatDateTimeString } from '~/utils/string/formatDateTimeString';
 
-export const ObjectFilterDropdownDateTimeInput = () => {
+type ObjectFilterDropdownDateTimeInputProps = {
+  instanceId: string;
+};
+
+export const ObjectFilterDropdownDateTimeInput = ({
+  instanceId,
+}: ObjectFilterDropdownDateTimeInputProps) => {
   const { dateFormat, timeFormat, timeZone } = useContext(UserContext);
   const dateLocale = useRecoilValue(dateLocaleState);
   const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
@@ -112,6 +118,7 @@ export const ObjectFilterDropdownDateTimeInput = () => {
 
   return (
     <DateTimePicker
+      instanceId={instanceId}
       relativeDate={relativeDate}
       isRelative={isRelativeOperand}
       date={internalDate}
diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterInput.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterInput.tsx
index e28743a329..d1f2ea4e68 100644
--- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterInput.tsx
@@ -82,7 +82,7 @@ export const ObjectFilterDropdownFilterInput = ({
       <>
         <ObjectFilterDropdownInnerSelectOperandDropdown />
         <DropdownMenuSeparator />
-        <ObjectFilterDropdownDateInput />
+        <ObjectFilterDropdownDateInput instanceId={filterDropdownId} />
       </>
     );
   } else if (filterType === 'DATE_TIME') {
@@ -90,7 +90,7 @@ export const ObjectFilterDropdownFilterInput = ({
       <>
         <ObjectFilterDropdownInnerSelectOperandDropdown />
         <DropdownMenuSeparator />
-        <ObjectFilterDropdownDateTimeInput />
+        <ObjectFilterDropdownDateTimeInput instanceId={filterDropdownId} />
       </>
     );
   } else {
diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/useApplyObjectFilterDropdownOperand.ts b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/useApplyObjectFilterDropdownOperand.ts
index 9e7442e106..9cf94462e3 100644
--- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/useApplyObjectFilterDropdownOperand.ts
+++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/useApplyObjectFilterDropdownOperand.ts
@@ -13,13 +13,9 @@ import { useUserTimezone } from '@/ui/input/components/internal/date/hooks/useUs
 import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
 import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
 import { stringifyRelativeDateFilter } from '@/views/view-filter-value/utils/stringifyRelativeDateFilter';
+import { DEFAULT_RELATIVE_DATE_FILTER_VALUE } from 'twenty-shared/constants';
 
-import {
-  isDefined,
-  type RelativeDateFilter,
-  type RelativeDateFilterDirection,
-  type RelativeDateFilterUnit,
-} from 'twenty-shared/utils';
+import { isDefined, type RelativeDateFilter } from 'twenty-shared/utils';
 
 export const useApplyObjectFilterDropdownOperand = () => {
   const objectFilterDropdownCurrentRecordFilter = useRecoilComponentValue(
@@ -108,9 +104,7 @@ export const useApplyObjectFilterDropdownOperand = () => {
         recordFilterToUpsert.displayValue = displayValue;
       } else if (newOperand === RecordFilterOperand.IS_RELATIVE) {
         const defaultRelativeDate: RelativeDateFilter = {
-          direction: 'THIS' as RelativeDateFilterDirection,
-          amount: 1,
-          unit: 'DAY' as RelativeDateFilterUnit,
+          ...DEFAULT_RELATIVE_DATE_FILTER_VALUE,
           timezone: userTimezone,
         };
 
diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/components/RecordCalendarTopBar.tsx b/packages/twenty-front/src/modules/object-record/record-calendar/components/RecordCalendarTopBar.tsx
index f088073850..83052bcdac 100644
--- a/packages/twenty-front/src/modules/object-record/record-calendar/components/RecordCalendarTopBar.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-calendar/components/RecordCalendarTopBar.tsx
@@ -121,6 +121,7 @@ export const RecordCalendarTopBar = () => {
           dropdownComponents={
             <DropdownContent widthInPixels={280}>
               <DateTimePicker
+                instanceId={recordCalendarId}
                 date={recordCalendarSelectedDate}
                 onChange={handleDateChange}
                 onClose={handleDateChange}
diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormDateFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormDateFieldInput.tsx
index 3cd508dc7d..3e7c239680 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormDateFieldInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormDateFieldInput.tsx
@@ -337,6 +337,7 @@ export const FormDateFieldInput = ({
                   <StyledDateInputAbsoluteContainer>
                     <OverlayContainer>
                       <DatePicker
+                        instanceId={instanceId}
                         date={pickerDate}
                         onChange={handlePickerChange}
                         onClose={handlePickerMouseSelect}
diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormDateTimeFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormDateTimeFieldInput.tsx
index 34a3d3d225..5cdd64a605 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormDateTimeFieldInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormDateTimeFieldInput.tsx
@@ -336,6 +336,7 @@ export const FormDateTimeFieldInput = ({
                   <StyledDateInputAbsoluteContainer>
                     <OverlayContainer>
                       <DateTimePicker
+                        instanceId={instanceId}
                         date={pickerDate ?? new Date()}
                         onChange={handlePickerChange}
                         onClose={handlePickerMouseSelect}
diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormRelativeDatePicker.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormRelativeDatePicker.tsx
index 43fd08a230..d054cc4c9f 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormRelativeDatePicker.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormRelativeDatePicker.tsx
@@ -1,6 +1,7 @@
 import { RelativeDatePickerHeader } from '@/ui/input/components/internal/date/components/RelativeDatePickerHeader';
 
 import { isNonEmptyString, isString } from '@sniptt/guards';
+import { useId } from 'react';
 import { DEFAULT_RELATIVE_DATE_FILTER_VALUE } from 'twenty-shared/constants';
 
 import {
@@ -21,6 +22,8 @@ export const FormRelativeDatePicker = ({
   onChange,
   readonly,
 }: FormRelativeDatePickerProps) => {
+  const instanceId = useId();
+
   const value =
     isString(defaultValue) && isNonEmptyString(defaultValue)
       ? safeParseRelativeDateFilterJSONStringified(defaultValue)
@@ -32,6 +35,7 @@ export const FormRelativeDatePicker = ({
 
   return (
     <RelativeDatePickerHeader
+      instanceId={instanceId}
       onChange={handleValueChange}
       direction={value?.direction ?? 'THIS'}
       unit={value?.unit ?? 'DAY'}
diff --git a/packages/twenty-front/src/modules/ui/field/input/components/DateInput.tsx b/packages/twenty-front/src/modules/ui/field/input/components/DateInput.tsx
index 84c4ca5c8e..9c766d2e5b 100644
--- a/packages/twenty-front/src/modules/ui/field/input/components/DateInput.tsx
+++ b/packages/twenty-front/src/modules/ui/field/input/components/DateInput.tsx
@@ -109,6 +109,7 @@ export const DateInput = ({
   return (
     <div ref={wrapperRef}>
       <DatePicker
+        instanceId={instanceId}
         date={internalValue ?? null}
         onChange={handleChange}
         onClose={handleClose}
diff --git a/packages/twenty-front/src/modules/ui/field/input/components/DateTimeInput.tsx b/packages/twenty-front/src/modules/ui/field/input/components/DateTimeInput.tsx
index 86e04b8a94..642b35b57d 100644
--- a/packages/twenty-front/src/modules/ui/field/input/components/DateTimeInput.tsx
+++ b/packages/twenty-front/src/modules/ui/field/input/components/DateTimeInput.tsx
@@ -109,6 +109,7 @@ export const DateTimeInput = ({
   return (
     <div ref={wrapperRef}>
       <DateTimePicker
+        instanceId={instanceId}
         date={internalValue ?? null}
         onChange={handleChange}
         onClose={handleClose}
diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DatePicker.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DatePicker.tsx
index 59957fe857..ef5defe79f 100644
--- a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DatePicker.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DatePicker.tsx
@@ -302,6 +302,7 @@ const StyledDatePickerFallback = styled.div`
 `;
 
 type DatePickerProps = {
+  instanceId: string;
   isRelative?: boolean;
   hideHeaderInput?: boolean;
   date: Nullable<string>;
@@ -333,6 +334,7 @@ const ReactDatePicker = lazy<ComponentType<DatePickerPropsType>>(() =>
 );
 
 export const DatePicker = ({
+  instanceId,
   date,
   onChange,
   onClose,
@@ -476,6 +478,7 @@ export const DatePicker = ({
             }) =>
               isRelative ? (
                 <RelativeDatePickerHeader
+                  instanceId={instanceId}
                   direction={relativeDate?.direction ?? 'PAST'}
                   amount={relativeDate?.amount}
                   unit={relativeDate?.unit ?? 'DAY'}
diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DateTimePicker.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DateTimePicker.tsx
index f04d256f91..e030b16554 100644
--- a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DateTimePicker.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DateTimePicker.tsx
@@ -300,6 +300,7 @@ const StyledDatePickerFallback = styled.div`
 `;
 
 type DateTimePickerProps = {
+  instanceId: string;
   isRelative?: boolean;
   hideHeaderInput?: boolean;
   date: Date | null;
@@ -331,6 +332,7 @@ const ReactDatePicker = lazy<ComponentType<DatePickerPropsType>>(() =>
 );
 
 export const DateTimePicker = ({
+  instanceId,
   date,
   onChange,
   onClose,
@@ -484,6 +486,7 @@ export const DateTimePicker = ({
           }) =>
             isRelative ? (
               <RelativeDatePickerHeader
+                instanceId={instanceId}
                 direction={relativeDate?.direction ?? 'PAST'}
                 amount={relativeDate?.amount}
                 unit={relativeDate?.unit ?? 'DAY'}
diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/RelativeDatePickerHeader.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/RelativeDatePickerHeader.tsx
index c979a31602..d52648a660 100644
--- a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/RelativeDatePickerHeader.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/RelativeDatePickerHeader.tsx
@@ -21,6 +21,7 @@ const StyledContainer = styled.div<{ noPadding: boolean }>`
 `;
 
 type RelativeDatePickerHeaderProps = {
+  instanceId: string;
   direction: RelativeDateFilterDirection;
   amount?: Nullable<number>;
   unit: RelativeDateFilterUnit;
@@ -31,6 +32,7 @@ type RelativeDatePickerHeaderProps = {
 };
 
 export const RelativeDatePickerHeader = ({
+  instanceId,
   direction,
   unit,
   amount,
@@ -53,7 +55,7 @@ export const RelativeDatePickerHeader = ({
   return (
     <StyledContainer noPadding={isFormField ?? false}>
       <Select
-        dropdownId="direction-select"
+        dropdownId={`direction-select-${instanceId}`}
         value={direction}
         onChange={(newDirection) => {
           if (amount === undefined && newDirection !== 'THIS') {
@@ -71,7 +73,7 @@ export const RelativeDatePickerHeader = ({
         disabled={readonly}
       />
       <SettingsTextInput
-        instanceId="relative-date-picker-amount"
+        instanceId={`relative-date-picker-amount-${instanceId}`}
         width={50}
         value={textInputValue}
         onChange={(text) => {
@@ -92,7 +94,7 @@ export const RelativeDatePickerHeader = ({
         disabled={direction === 'THIS' || readonly}
       />
       <Select
-        dropdownId="unit-select"
+        dropdownId={`unit-select-${instanceId}`}
         value={unit}
         onChange={(newUnit) => {
           if (direction !== 'THIS' && amount === undefined) {
diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/__stories__/InternalDatePicker.stories.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/__stories__/InternalDatePicker.stories.tsx
index d5844883fa..f2db8ceb59 100644
--- a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/__stories__/InternalDatePicker.stories.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/__stories__/InternalDatePicker.stories.tsx
@@ -17,6 +17,7 @@ const meta: Meta<typeof DateTimePicker> = {
     const [, updateArgs] = useArgs();
     return (
       <DateTimePicker
+        instanceId="story-date-time-picker"
         date={isDefined(date) ? new Date(date) : new Date()}
         onChange={(newDate) => updateArgs({ date: newDate })}
       />
diff --git a/packages/twenty-shared/src/constants/DefaultRelativeDateFilterValue.ts b/packages/twenty-shared/src/constants/DefaultRelativeDateFilterValue.ts
index 1eedbdda63..840804648a 100644
--- a/packages/twenty-shared/src/constants/DefaultRelativeDateFilterValue.ts
+++ b/packages/twenty-shared/src/constants/DefaultRelativeDateFilterValue.ts
@@ -3,5 +3,5 @@ import { type RelativeDateFilter } from '@/utils';
 export const DEFAULT_RELATIVE_DATE_FILTER_VALUE: RelativeDateFilter = {
   direction: 'THIS',
   unit: 'DAY',
-  amount: undefined,
+  amount: 1,
 };