Как избавиться от бага — всплывающая подсказка не убирается по первому клику?

Question

[Paul14]

Хочу реализовать всплывающие подсказки, когда пользователь вводит текст в инпут. Набирает "то" - выпадают снизу подсказки ["торт", "торговля"]. При нажатии на подсказку текст помещается в инпут. Возникает проблема, что нужно нажать 2 раза на подсказку, чтобы она исчезла. Интересует лучшее решение и архитектура кода для такой задачи.

Ссылка на сандбокс

import "./styles.css";
import { useEffect, useState } from "react";

export default function App() {
  //INPUT VALUE
  const [val, setVal] = useState("");
  //VARIABLES ARRAY
  const arrayVariables = ["торт", "торговец", "слон", "кафе"];
  // PRINT FILTRED VARIABLES
  const [printVariables, setPrintVariables] = useState([]);

  useEffect(() => {
    if (val.length > 1) {
      const variables = arrayVariables.filter((v) => v.includes(val));
      setPrintVariables(variables);
    }
  }, [val]);

  return (
    <div className="App">
      <input value={val} onChange={(e) => setVal(e.target.value)} />

      <div>
        {printVariables.length > 0 &&
          printVariables.map((v) => {
            return (
              <div
                onClick={() => {
                  setVal(v);
                  setPrintVariables([]);
                }}
              >
                {v}
              </div>
            );
          })}
      </div>
    </div>
  );
}

Answer 1

[0xD34F]

Возникает проблема, что нужно нажать 2 раза на подсказку, чтобы она исчезла.

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

Может, вместо эффекта вам стоит вычислять массив подсказок в обработчике onChange:

const onChange = ({ target: { value } }) => {
  setVal(value);
  setPrintVariables(value.length > 1
    ? arrayVariables.filter(n => n.includes(value))
    : []
  );
};

<input value={val} onChange={onChange} />

??

Comments

[Paul14]

Храни вас господь