2

I have a problem with Autocomplete from @react-google-maps/api

I use for formik to catch info but when i try to catch text in my TextField autocompleted by the <Autocomplete></Autocomplete>, i only catch the text i wrote

Exemple : I want to search Paris

I write Pa i click on Paris and if i console log the result i get Pa instead of having Paris in my TextField

import React from 'react'
import { Autocomplete } from '@react-google-maps/api';
import { useFormik } from 'formik';
import { useGoogleMaps } from './GoogleMapsProvider';
import { Button, TextField } from '@mui/material';

function Form() {
  const { isLoaded } = useGoogleMaps();

  const formik = useFormik({
    initialValues: {},
    onSubmit: (values) => {
      console.log(JSON.stringify(values, null, 2));
    },
  });

  return (
    <div>
      <h1 style={{textAlign:'center', fontFamily:"Rajdhani", marginTop: 30}}>Test</h1>
      <div style={{textAlign:'center'}}>
        <form onSubmit={formik.handleSubmit}>
          <Autocomplete>
              <TextField name="place" onChange={formik.handleChange} label="Place" variant="outlined" sx={{ width: 300, marginTop: 5 }} required/>
          </Autocomplete>
          <Button variant="contained" sx={{ marginTop: 2 }} type="submit">Add</Button>
        </form>
      </div>
    </div>
  )
}

export default React.memo(Form)
cgarrot
  • 21
  • 2

0 Answers0