[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

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}

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}

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'}

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'}

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) {

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 })}
       />