Как корректно установить фокус на инпуты для поиска по таблице?

Question

[floweredcat]

Доброго времени суток, коллеги!

Пытаюсь реализовать компонент для поиска по таблице, но столкнулся с проблемой фокусировки на поле ввода.
Мой код:

export const SearchBar = ({ handleSearch, filter, placeholder, name }) => {
  
  const [value, setValue] = useState(filter);
  const inputRef = useRef(null);
  useEffect(() => {
    setValue(filter);
  }, [filter]);

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []);

  const updateState = (e) => {
    setValue(e.target.value);
    handleSearch(e.target.value, name);
  }

  return (
    <input
      type="text"
      ref={inputRef}
      value={value}
      placeholder={placeholder}
      onChange={updateState}
      className={styles.search_input}
    ></input>
  );
};

компонент используется в ячейке хедера столбца, по которому необходимо провести поиск. Значение фильтра записывается в редукс-стор, а тело таблицы ререндерится при каждом вводе символа в SearchInput.

В моем коде фокус после ввода устанавливается в последний экземпляр поисковой строки, это и является сутью проблемы.

Пробовал устанавливать autofocus, уникальный id, но не добился успеха

Comments

[Александр]

Попробуй

export const SearchBar = ({ handleSearch, filter, placeholder, name }) => {
  const [value, setValue] = useState(filter);
  const inputRef = useRef(null);

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, [inputRef.current]);

  const updateState = (e) => {
    setValue(e.target.value);
    handleSearch(e.target.value, name);
  };

  return (
    <input
      type="text"
      ref={inputRef}
      value={value}
      placeholder={placeholder}
      onChange={updateState}
      className={styles.search_input}
    />
  );
};

[floweredcat]

Александр, не помогло