From 02ca893be7e44aacc35b9e163e48960bfc985975 Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Thu, 12 Sep 2024 21:28:35 +0200
Subject: [PATCH] focus input when adding catalog filter

---
 .../catalog/catalog-filters/catalog-filters.tsx      | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/views/catalog/catalog-filters/catalog-filters.tsx b/src/views/catalog/catalog-filters/catalog-filters.tsx
index e82bfeab..39a53f61 100644
--- a/src/views/catalog/catalog-filters/catalog-filters.tsx
+++ b/src/views/catalog/catalog-filters/catalog-filters.tsx
@@ -1,4 +1,4 @@
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import useCatalogFiltersStore from '../../../stores/use-catalog-filters-store';
 import styles from './catalog-filters.module.css';
@@ -8,9 +8,16 @@ const FiltersTable = ({ onSave }: { onSave: () => void }) => {
   const { filterItems, saveAndApplyFilters } = useCatalogFiltersStore();
 
   const [localFilterItems, setLocalFilterItems] = useState(filterItems);
+  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
 
   const handleAddFilter = useCallback(() => {
-    setLocalFilterItems((prev) => [...prev, { text: '', enabled: true }]);
+    setLocalFilterItems((prev) => {
+      const newIndex = prev.length;
+      setTimeout(() => {
+        inputRefs.current[newIndex]?.focus();
+      }, 0);
+      return [...prev, { text: '', enabled: true }];
+    });
   }, []);
 
   const handleSave = useCallback(() => {
@@ -70,6 +77,7 @@ const FiltersTable = ({ onSave }: { onSave: () => void }) => {
                 spellCheck='false'
                 value={item.text}
                 onChange={(e) => updateLocalFilterItem(index, { ...item, text: e.target.value })}
+                ref={(el) => (inputRefs.current[index] = el)}
               />
             </td>
             <td>