diff --git a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx
index 02ca43184..410379b4a 100644
--- a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx
+++ b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx
@@ -1,3 +1,5 @@
+import styled from '@emotion/styled';
+import { useRecoilValue } from 'recoil';
import { IconChevronDown, useIcons } from 'twenty-ui';
import { OBJECT_SORT_DROPDOWN_ID } from '@/object-record/object-sort-dropdown/constants/ObjectSortDropdownId';
@@ -7,12 +9,35 @@ import { LightButton } from '@/ui/input/button/components/LightButton';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
-import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
import { SORT_DIRECTIONS } from '../types/SortDirection';
+export const StyledInput = styled.input`
+ background: ${({ theme }) => theme.background.secondary};
+ border: none;
+ border-top: 1px solid ${({ theme }) => theme.border.color.light};
+ border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
+ border-radius: 0;
+ color: ${({ theme }) => theme.font.color.primary};
+ margin: 0;
+ outline: none;
+ padding: ${({ theme }) => theme.spacing(2)};
+ height: 20px;
+ font-family: inherit;
+ font-size: ${({ theme }) => theme.font.size.sm};
+
+ font-weight: inherit;
+ max-width: 100%;
+ overflow: hidden;
+ text-decoration: none;
+
+ &::placeholder {
+ color: ${({ theme }) => theme.font.color.light};
+ }
+`;
+
export type ObjectSortDropdownButtonProps = {
sortDropdownId: string;
hotkeyScope: HotkeyScope;
@@ -32,6 +57,9 @@ export const ObjectSortDropdownButton = ({
isSortSelected,
availableSortDefinitions,
handleAddSort,
+ objectSortDropdownSearchInputState,
+ setObjectSortDropdownSearchInput,
+ resetSearchInput,
} = useObjectSortDropdown();
const handleButtonClick = () => {
@@ -39,9 +67,14 @@ export const ObjectSortDropdownButton = ({
};
const handleDropdownButtonClose = () => {
+ resetSearchInput();
resetState();
};
+ const objectSortDropdownSearchInput = useRecoilValue(
+ objectSortDropdownSearchInputState,
+ );
+
const { getIcon } = useIcons();
return (
@@ -80,15 +113,32 @@ export const ObjectSortDropdownButton = ({
>
{selectedSortDirection === 'asc' ? 'Ascending' : 'Descending'}
-
+
+ setObjectSortDropdownSearchInput(event.target.value)
+ }
+ />
{[...availableSortDefinitions]
.sort((a, b) => a.label.localeCompare(b.label))
+ .filter((item) =>
+ item.label
+ .toLocaleLowerCase()
+ .includes(
+ objectSortDropdownSearchInput.toLocaleLowerCase(),
+ ),
+ )
.map((availableSortDefinition, index) => (