fix: set focus on filter search (#775)

src/pages/editor-page/canvas/canvas-filter/canvas-filter.tsx

@@ -1,4 +1,10 @@
-import React, { useMemo, useState, useCallback, useEffect } from 'react';
+import React, {
+    useMemo,
+    useState,
+    useCallback,
+    useEffect,
+    useRef,
+} from 'react';
 import { X, Search, Eye, EyeOff, Database, Table, Funnel } from 'lucide-react';
 import { useChartDB } from '@/hooks/use-chartdb';
 import { useTranslation } from 'react-i18next';
@@ -49,6 +55,7 @@ export const CanvasFilter: React.FC<CanvasFilterProps> = ({ onClose }) => {
     const [searchQuery, setSearchQuery] = useState('');
     const [expanded, setExpanded] = useState<Record<string, boolean>>({});
     const [isFilterVisible, setIsFilterVisible] = useState(false);
+    const searchInputRef = useRef<HTMLInputElement>(null);
 
     // Extract only the properties needed for tree data
     const relevantTableData = useMemo<RelevantTableData[]>(
@@ -345,9 +352,13 @@ export const CanvasFilter: React.FC<CanvasFilterProps> = ({ onClose }) => {
         [focusOnTable, filteredSchemas]
     );
 
-    // Animate in on mount
+    // Animate in on mount and focus search input
     useEffect(() => {
         setIsFilterVisible(true);
+        // Focus the search input after a short delay to ensure the component is fully rendered
+        setTimeout(() => {
+            searchInputRef.current?.focus();
+        }, 300);
     }, []);
 
     return (
@@ -381,6 +392,7 @@ export const CanvasFilter: React.FC<CanvasFilterProps> = ({ onClose }) => {
                 <div className="relative h-9">
                     <Search className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
                     <Input
+                        ref={searchInputRef}
                         placeholder={t(
                             'canvas_filter.search_placeholder',
                             'Search tables...'

src/pages/editor-page/side-panel/areas-section/areas-section.tsx

@@ -10,8 +10,6 @@ import { EmptyState } from '@/components/empty-state/empty-state';
 import { ScrollArea } from '@/components/scroll-area/scroll-area';
 import { useTranslation } from 'react-i18next';
 import { useViewport } from '@xyflow/react';
-import { useHotkeys } from 'react-hotkeys-hook';
-import { getOperatingSystem } from '@/lib/utils';
 
 export interface AreasSectionProps {}
 
@@ -59,19 +57,6 @@ export const AreasSection: React.FC<AreasSectionProps> = () => {
         setFilterText('');
     }, []);
 
-    const operatingSystem = useMemo(() => getOperatingSystem(), []);
-
-    useHotkeys(
-        operatingSystem === 'mac' ? 'meta+f' : 'ctrl+f',
-        () => {
-            filterInputRef.current?.focus();
-        },
-        {
-            preventDefault: true,
-        },
-        [filterInputRef]
-    );
-
     return (
         <section
             className="flex flex-1 flex-col overflow-hidden px-2"

src/pages/editor-page/side-panel/custom-types-section/custom-types-section.tsx

@@ -6,8 +6,6 @@ import { useChartDB } from '@/hooks/use-chartdb';
 import { EmptyState } from '@/components/empty-state/empty-state';
 import { ScrollArea } from '@/components/scroll-area/scroll-area';
 import { useTranslation } from 'react-i18next';
-import { useHotkeys } from 'react-hotkeys-hook';
-import { getOperatingSystem } from '@/lib/utils';
 import { CustomTypeList } from './custom-type-list/custom-type-list';
 import { DatabaseType } from '@/lib/domain/database-type';
 
@@ -37,19 +35,6 @@ export const CustomTypesSection: React.FC<CustomTypesSectionProps> = () => {
         await createCustomType();
     }, [createCustomType]);
 
-    const operatingSystem = useMemo(() => getOperatingSystem(), []);
-
-    useHotkeys(
-        operatingSystem === 'mac' ? 'meta+f' : 'ctrl+f',
-        () => {
-            filterInputRef.current?.focus();
-        },
-        {
-            preventDefault: true,
-        },
-        [filterInputRef]
-    );
-
     return (
         <section
             className="flex flex-1 flex-col overflow-hidden px-2"

src/pages/editor-page/side-panel/relationships-section/relationships-section.tsx

@@ -16,8 +16,6 @@ import {
     TooltipTrigger,
 } from '@/components/tooltip/tooltip';
 import { useDialog } from '@/hooks/use-dialog';
-import { useHotkeys } from 'react-hotkeys-hook';
-import { getOperatingSystem } from '@/lib/utils';
 
 export interface RelationshipsSectionProps {}
 
@@ -49,19 +47,6 @@ export const RelationshipsSection: React.FC<RelationshipsSectionProps> = () => {
         openCreateRelationshipDialog();
     }, [openCreateRelationshipDialog, setFilterText]);
 
-    const operatingSystem = useMemo(() => getOperatingSystem(), []);
-
-    useHotkeys(
-        operatingSystem === 'mac' ? 'meta+f' : 'ctrl+f',
-        () => {
-            filterInputRef.current?.focus();
-        },
-        {
-            preventDefault: true,
-        },
-        [filterInputRef]
-    );
-
     return (
         <section className="flex flex-1 flex-col overflow-hidden px-2">
             <div className="flex items-center justify-between gap-4 py-1">

src/pages/editor-page/side-panel/tables-section/tables-section.tsx

@@ -98,17 +98,6 @@ export const TablesSection: React.FC<TablesSectionProps> = () => {
 
     const operatingSystem = useMemo(() => getOperatingSystem(), []);
 
-    // useHotkeys(
-    //     operatingSystem === 'mac' ? 'meta+f' : 'ctrl+f',
-    //     () => {
-    //         filterInputRef.current?.focus();
-    //     },
-    //     {
-    //         preventDefault: true,
-    //     },
-    //     [filterInputRef]
-    // );
-
     useHotkeys(
         operatingSystem === 'mac' ? 'meta+p' : 'ctrl+p',
         () => {