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 741b448ab..0a463a229 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 @@ -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(new Date()); - const { filterDefinitionUsedInDropdownState, selectedOperandInDropdownState, @@ -25,11 +24,14 @@ export const ObjectFilterDropdownDateInput = () => { ); const selectedFilter = useRecoilValue(selectedFilterState); - + const [internalDate, setInternalDate] = useState( + 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 + } /> ); }; diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownNumberInput.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownNumberInput.tsx index b0ad3cc85..98f27f109 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownNumberInput.tsx +++ b/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 && ( ) => { + 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, }); }} diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownSearchInput.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownSearchInput.tsx index d84d2e4dd..757dca89b 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownSearchInput.tsx +++ b/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 && ( { } = 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 && (