diff --git a/packages/twenty-front/src/modules/settings/components/SettingsOptions/__stories__/SettingsOptionCardContentSelect.stories.tsx b/packages/twenty-front/src/modules/settings/components/SettingsOptions/__stories__/SettingsOptionCardContentSelect.stories.tsx index fbd89654b..032572971 100644 --- a/packages/twenty-front/src/modules/settings/components/SettingsOptions/__stories__/SettingsOptionCardContentSelect.stories.tsx +++ b/packages/twenty-front/src/modules/settings/components/SettingsOptions/__stories__/SettingsOptionCardContentSelect.stories.tsx @@ -1,5 +1,6 @@ import { SettingsOptionCardContentSelect } from '@/settings/components/SettingsOptions/SettingsOptionCardContentSelect'; -import { Select, SelectValue } from '@/ui/input/components/Select'; +import { Select } from '@/ui/input/components/Select'; +import { SelectValue } from '@/ui/input/components/internal/select/types'; import styled from '@emotion/styled'; import { Meta, StoryObj } from '@storybook/react'; import { useState } from 'react'; diff --git a/packages/twenty-front/src/modules/ui/input/components/Select.tsx b/packages/twenty-front/src/modules/ui/input/components/Select.tsx index 873281606..340156cf9 100644 --- a/packages/twenty-front/src/modules/ui/input/components/Select.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/Select.tsx @@ -7,6 +7,7 @@ import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/Dropdow import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; +import { SelectValue } from '@/ui/input/components/internal/select/types'; import { SelectControl } from '@/ui/input/components/SelectControl'; import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent'; import { DropdownHotkeyScope } from '@/ui/layout/dropdown/constants/DropdownHotkeyScope'; @@ -14,6 +15,7 @@ import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/Gene import { DropdownOffset } from '@/ui/layout/dropdown/types/DropdownOffset'; import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList'; import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem'; +import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList'; import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { isDefined } from 'twenty-shared/utils'; @@ -29,8 +31,6 @@ type CallToActionButton = { Icon?: IconComponent; }; -export type SelectValue = string | number | boolean | null; - export type SelectProps = { className?: string; disabled?: boolean; @@ -99,6 +99,7 @@ export const Select = ({ options.find(({ value: key }) => key === value) || emptyOption || options[0]; + const filteredOptions = useMemo( () => searchInputValue @@ -129,6 +130,14 @@ export const Select = ({ dropdownId, ); + const { setSelectedItemId } = useSelectableList(dropdownId); + + const handleDropdownOpen = () => { + if (selectedOption && !searchInputValue) { + setSelectedItemId(selectedOption.label); + } + }; + return ( ({ dropdownId={dropdownId} dropdownPlacement="bottom-start" dropdownOffset={dropdownOffset} + onOpen={handleDropdownOpen} clickableComponent={ new Date().getFullYear() + 5 - i, + (_, i) => new Date().getFullYear() + 50 - i, ).map((year) => ({ label: year.toString(), value: year })); type AbsoluteDatePickerHeaderProps = { diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/select/types.ts b/packages/twenty-front/src/modules/ui/input/components/internal/select/types.ts new file mode 100644 index 000000000..d4e6cdca1 --- /dev/null +++ b/packages/twenty-front/src/modules/ui/input/components/internal/select/types.ts @@ -0,0 +1 @@ +export type SelectValue = string | number | boolean | null;