Блог

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

 const SearchLocationInput = (props) => {
  const [chosenLocation, setChosenLocation] = useState(null);
  const autoCompleteRef = useRef(null);

  const dispatch = useDispatch();

  const handleOnChange = (value) => {
    console.log(value);
    console.log(props.fieldName);
    props.formik.setFieldValue(props.fieldName, value);
  };

  useEffect(() => {
    chosenLocation amp;amp; dispatch(auth.updateBusinessLocation(chosenLocation));
  }, [chosenLocation]);

  useEffect(() => {
    loadScript(
      `https://maps.googleapis.com/maps/api/js?key=${process.env.NEXT_PUBLIC_GOOGLE_API_KEY}amp;libraries=places`,
      () => handleScriptLoad(handleOnChange, setChosenLocation, autoCompleteRef)
    );
  }, []);

  return (
    <div className="search-location-input">
      <FloatInput
        ignoreError
        type="text"
        name={props.fieldName}
        ref={autoCompleteRef}
        position={props.position}
        label={props.label}
        onChange={(e) => handleOnChange(e.target.value)}
      />
    </div>
  );
};
 

Обычный ввод в поле сохраняет текст в handleOnChange. Значение и имя поля в порядке и регистрируются как консоль.

Я передаю эту функцию в handleScriptLoad, которая по сути возвращает результат поиска. Работает нормально. Код для этого приведен ниже.

 const handlePlaceSelect = async (handleOnChange, setChosenLocation) => {
  const addressObject = autoComplete.getPlace();
  const query = addressObject.formatted_address;
  handleOnChange(query);
  setChosenLocation(addressObject);
};
 

Когда handleOnChange запускается из этой функции, я получаю результаты журнала консоли, как и ожидалось. Я также регистрировал значения formik после установки, и значение есть.

Итак, проблема: если я нахожу результат автозаполнения, стрелку вниз и нажимаю enter, значение ввода формы обновляется, все работает отлично. НО, если я решу щелкнуть результат, форма сбрасывается.

Я думаю, что вся форма повторно отображается по щелчку / внешнему щелчку. Итак, кто-нибудь знает, как обнаружить и переопределить конкретное поле?