Existing filter value isn't passed to the component to edit it - Issue #6278 (#6449)

Hi @FelixMalfait,
Regarding Issue #6278 
I’ve resolved the issue with fields involving numbers and text.

However, I’ve encountered a problem with how dates are parsed, selected,
and displayed. When a date is selected for the first time, it is
correctly parsed and adjusted to the local timezone (e.g., 05:30:00 AM
for my timezone). However, when trying to change the date, the day prior
to the selected date is shown instead of the intended date. Please refer
to the attached video for a demonstration of this bug.

I suspect this issue is related to how the date is parsed and selected
in relation to timezones, and I am currently investigating it further.

Could you please review the changes made so far?

Thanks!




https://github.com/user-attachments/assets/4f0e5694-530b-489c-807e-3b7d52da0742

---------

Co-authored-by: Weiko <corentin@twenty.com>

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownDateInput.tsx

@@ -4,11 +4,10 @@ import { v4 } from 'uuid';
 import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
 import { InternalDatePicker } from '@/ui/input/components/internal/date/components/InternalDatePicker';
 import { useState } from 'react';
+import { FieldMetadataType } from '~/generated-metadata/graphql';
 import { isDefined } from '~/utils/isDefined';
 
 export const ObjectFilterDropdownDateInput = () => {
-  const [internalDate, setInternalDate] = useState<Date | null>(new Date());
-
   const {
     filterDefinitionUsedInDropdownState,
     selectedOperandInDropdownState,
@@ -25,11 +24,14 @@ export const ObjectFilterDropdownDateInput = () => {
   );
 
   const selectedFilter = useRecoilValue(selectedFilterState);
-
+  const [internalDate, setInternalDate] = useState<Date | null>(
+    selectedFilter?.value ? new Date(selectedFilter.value) : new Date(),
+  );
   const handleChange = (date: Date | null) => {
     setInternalDate(date);
 
     if (!filterDefinitionUsedInDropdown || !selectedOperandInDropdown) return;
+
     selectFilter?.({
       id: selectedFilter?.id ? selectedFilter.id : v4(),
       fieldMetadataId: filterDefinitionUsedInDropdown.fieldMetadataId,
@@ -47,6 +49,9 @@ export const ObjectFilterDropdownDateInput = () => {
       date={internalDate}
       onChange={handleChange}
       onMouseSelect={handleChange}
+      isDateTimeInput={
+        filterDefinitionUsedInDropdown?.type === FieldMetadataType.DateTime
+      }
     />
   );
 };

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownNumberInput.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent } from 'react';
+import { ChangeEvent, useCallback, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 import { v4 } from 'uuid';
 
@@ -12,6 +12,7 @@ export const ObjectFilterDropdownNumberInput = () => {
     selectedFilterState,
     selectFilter,
   } = useFilterDropdown();
+  const [hasFocused, setHasFocused] = useState(false);
 
   const filterDefinitionUsedInDropdown = useRecoilValue(
     filterDefinitionUsedInDropdownState,
@@ -22,20 +23,38 @@ export const ObjectFilterDropdownNumberInput = () => {
 
   const selectedFilter = useRecoilValue(selectedFilterState);
 
+  const [inputValue, setInputValue] = useState(
+    () => selectedFilter?.value || '',
+  );
+
+  const handleInputRef = useCallback(
+    (node: HTMLInputElement | null) => {
+      if (Boolean(node) && !hasFocused) {
+        node?.focus();
+        node?.select();
+        setHasFocused(true);
+      }
+    },
+    [hasFocused],
+  );
   return (
     filterDefinitionUsedInDropdown &&
     selectedOperandInDropdown && (
       <DropdownMenuInput
+        ref={handleInputRef}
+        value={inputValue}
         autoFocus
         type="number"
         placeholder={filterDefinitionUsedInDropdown.label}
         onChange={(event: ChangeEvent<HTMLInputElement>) => {
+          const newValue = event.target.value;
+          setInputValue(newValue);
           selectFilter?.({
             id: selectedFilter?.id ? selectedFilter.id : v4(),
             fieldMetadataId: filterDefinitionUsedInDropdown.fieldMetadataId,
-            value: event.target.value,
+            value: newValue,
             operand: selectedOperandInDropdown,
-            displayValue: event.target.value,
+            displayValue: newValue,
             definition: filterDefinitionUsedInDropdown,
           });
         }}

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownSearchInput.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent } from 'react';
+import { ChangeEvent, useCallback, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 
 import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
@@ -11,6 +11,7 @@ export const ObjectFilterDropdownSearchInput = () => {
     objectFilterDropdownSearchInputState,
     setObjectFilterDropdownSearchInput,
   } = useFilterDropdown();
+  const [hasFocused, setHasFocused] = useState(false);
 
   const filterDefinitionUsedInDropdown = useRecoilValue(
     filterDefinitionUsedInDropdownState,
@@ -22,10 +23,21 @@ export const ObjectFilterDropdownSearchInput = () => {
     objectFilterDropdownSearchInputState,
   );
 
+  const handleInputRef = useCallback(
+    (node: HTMLInputElement | null) => {
+      if (Boolean(node) && !hasFocused) {
+        node?.focus();
+        node?.select();
+        setHasFocused(true);
+      }
+    },
+    [hasFocused],
+  );
   return (
     filterDefinitionUsedInDropdown &&
     selectedOperandInDropdown && (
       <DropdownMenuSearchInput
+        ref={handleInputRef}
         autoFocus
         type="text"
         value={objectFilterDropdownSearchInput}

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownTextSearchInput.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, useState } from 'react';
+import { ChangeEvent, useCallback, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 import { v4 } from 'uuid';
 
@@ -16,6 +16,7 @@ export const ObjectFilterDropdownTextSearchInput = () => {
   } = useFilterDropdown();
 
   const [filterId] = useState(v4());
+  const [hasFocused, setHasFocused] = useState(false);
 
   const filterDefinitionUsedInDropdown = useRecoilValue(
     filterDefinitionUsedInDropdownState,
@@ -28,10 +29,21 @@ export const ObjectFilterDropdownTextSearchInput = () => {
   );
   const selectedFilter = useRecoilValue(selectedFilterState);
 
+  const handleInputRef = useCallback(
+    (node: HTMLInputElement | null) => {
+      if (Boolean(node) && !hasFocused) {
+        node?.focus();
+        node?.select();
+        setHasFocused(true);
+      }
+    },
+    [hasFocused],
+  );
   return (
     filterDefinitionUsedInDropdown &&
     selectedOperandInDropdown && (
       <DropdownMenuSearchInput
+        ref={handleInputRef}
         autoFocus
         type="text"
         placeholder={filterDefinitionUsedInDropdown.label}