I'm currently working on implementing an autocomplete feature using Google Places API in my project with Material UI React, Redux-Form, Revalidate, and MUI-Places-Autocomplete. Although I've successfully integrated the place lookup functionality, I'm facing challenges with error handling for this input field.
One specific issue I encountered is that when I type in something, select a place from the dropdown, clear the field, and click out of it, instead of displaying an empty field and error message, it retains the previously selected value. It seems like the error handling mechanism isn't functioning properly compared to other input fields in my form.
I experimented with using React-Places Autocomplete, which worked as expected but lacked the material design aesthetics required for my project, making it not a viable alternative for me.
Given that MUI-Places-Autocomplete offers various props, including textFieldProps, I believe there should be a way to utilize the error prop from the text field to address this issue. However, I'm uncertain about how to achieve this implementation.
Below is the code snippet related to what I'm attempting to accomplish:
PlaceInput.jsx
import React, { Component } from 'react';
import MUIPlacesAutocomplete from 'mui-places-autocomplete';
import Script from 'react-load-script';
/* MUI Components */
import FormControl from '@material-ui/core/FormControl';
import FormHelperText from '@material-ui/core/FormHelperText';
class PlaceInput extends Component {
state = {
scriptLoaded: false
}
handleScriptLoad = () => {
this.setState({
scriptLoaded: true
})
}
...
EventForm.jsx
/*global google*/
import { reduxForm, Field } from 'redux-form';
import { composeValidators, combineValidators, isRequired, hasLengthGreaterThan } from 'revalidate';
import { geocodeBySuggestion } from 'mui-places-autocomplete';
/* Form Inputs */
import PlaceInput from '../../../app/common/form/PlaceInput';
const validate = combineValidators({
title: isRequired({ message: 'The event title is required' }),
category: isRequired({ message: 'Please provide a category' }),
description: composeValidators(
isRequired({ message: 'Please enter a description' }),
hasLengthGreaterThan(4)({ message: 'Description needs to be at least 5 characters' })
)(),
city: isRequired('City'),
venue: isRequired('Venue'),
date: isRequired('Date')
});
class EventForm extends Component {
...