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)