From 95d80af0c61da1afe52e811d2e49b1148df0c6d3 Mon Sep 17 00:00:00 2001
From: Weiko <corentin@twenty.com>
Date: Tue, 30 Apr 2024 10:44:32 +0200
Subject: [PATCH] Remove debounce on filter search bar (#5215)

A search bar has been introduced in the filter dropdown menu however we
don't want to apply debounce since the search has no side-effect and is
purely FE (it's not querying the DB compared to other search bars). Also
adding autofocus on the search bar when the dropdown is open.
---
 .../components/ObjectFilterDropdownFilterSelect.tsx | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect.tsx
index e052004b3..cc10cb279 100644
--- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect.tsx
+++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect.tsx
@@ -2,7 +2,6 @@ import { useState } from 'react';
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
 import { useIcons } from 'twenty-ui';
-import { useDebouncedCallback } from 'use-debounce';
 
 import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
 import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope';
@@ -55,19 +54,15 @@ export const ObjectFilterDropdownFilterSelect = () => {
 
   const setHotkeyScope = useSetHotkeyScope();
 
-  const debouncedSetSearchFilter = useDebouncedCallback(setSearchText, 100, {
-    leading: true,
-  });
-  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    debouncedSetSearchFilter(event.target.value);
-  };
-
   return (
     <>
       <StyledInput
         value={searchText}
+        autoFocus
         placeholder="Search fields"
-        onChange={handleSearchChange}
+        onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+          setSearchText(event.target.value)
+        }
       />
       <DropdownMenuItemsContainer>
         {[...availableFilterDefinitions]