PlacesAutoComplete skips the first character when typing in with required.

[bilalarifsiddiqui]

I used MUI to wrap this package. And it's a required field. When I press submit if shows required filed error, that's okay. But when I press any character like 'a' or any it does not displays it. But it only removes the required error. When I type a character again it shows up.

<PlacesAutocomplete
searchOptions={{
types: ["(regions)"],
componentRestrictions: { country: "us" },
}}
value={zipCode}
ref={(ref) => (canvasRef = ref)}
onChange={setZipCode}
onSelect={handleSelect}
>
{({
getInputProps,
suggestions,
getSuggestionItemProps,
loading,
}) => (

<TextField
{...getInputProps()}
disabled={
window.location.href.includes("review-form")
? true
: patientForm["updateEditButtonForNewPatient"]
? false
: patientForm["updateEditButtonExistingPatient"]
? true
: false
}
label={_resources.PatientInformation.ZIP}
variant="outlined"
size="small"
InputLabelProps={{ shrink: true }}
className={
"loc-input zip-input" +
(formData.zip === null && onSubmitFlag
? " zip-error"
: "")
}
name="zipCode"
id="location-input"
inputRef={register({
required: _resources.PatientInformation.ZIP_REQUIRED,
})}
error={Boolean(
formData.zip !== null ? null : errors.zipCode
)}
helperText={
formData.zip !== null ? null : errors.zipCode?.message
}
/>

              {formData.zip === null && onSubmitFlag && (
                <span className="error">
                  {_resources.PatientInformation.ZIP_REQUIRED}
                </span>
              )}

              <div className="autocomplete-dropdown-container">
                {loading ? (
                  <Spin
                    className="m-auto plcs-auto-complete-spinner"
                    indicator={antIcon}
                  />
                ) : null}

                {suggestions.map((suggestion, index) => {
                  const style = {
                    backgroundColor: suggestion.active ? "#41b6e6" : "#fff",
                    borderTop: "1px solid #00504633",
                    paddingTop: "1px",
                    paddingBottom: "1px",
                  };

                  return (
                    <div
                      key={index}
                      className="suggestions"
                      {...getSuggestionItemProps(suggestion, { style })}
                    >
                      <img
                        src={clinicIcon}
                        className="suggestions-location-icon icon-location"
                        alt="clinic-icon"
                      />
                      {suggestion.description.slice(0, 60)}
                    </div>
                  );
                })}
              </div>
            </div>
          )}
        </PlacesAutocomplete>

[khizerdev]

I found out, it is related to react-hook-forms. For more information check this out

https://react-hook-form.com/faqs#Whyisthefirstkeystrokenotworking