React Final Form with react-places-autocomplete

Question

I've looked at a bunch of other similar questions, but none are answered!

So far I have created a standard record-level which looks like this: https://final-form.org/docs/react-final-form/examples/record-level-validation

I am using React Final Form with react-places-autocomplete. I want to include the selections of react-places-autocomplete to show in the values as seen in the link above, when you enter information into the fields.

I have tried to add the following code based on react-places-autocomplete:

         <Field name="location">
          {({input, meta}) => (
            <PlacesAutocomplete
              value={address}
              onChange={setAddress}
              onSelect={handleSelect}
              >
              {({ getInputProps, suggestions, getSuggestionItemProps, loading }) => (
                <div>
                <p> latitude: {coordinates.lat}</p>
                <p> longitude: {coordinates.lng}</p>
                  <input
                    {...input}
                    {...getInputProps({
                      placeholder: 'Search Places ...',
                      className: 'location-search-input',
                    })}
                  />
                  <div className="autocomplete-dropdown-container">
                    {loading && <div>Loading...</div>}
                    {suggestions.map(suggestion => {
                      const className = suggestion.active
                        ? 'suggestion-item--active'
                        : 'suggestion-item';
                      // inline style for demonstration purpose
                      const style = suggestion.active
                        ? { backgroundColor: '#fafafa', cursor: 'pointer' }
                        : { backgroundColor: '#ffffff', cursor: 'pointer' };
                      return (
                        <div
                          {...getSuggestionItemProps(suggestion, {
                            className,
                            style,
                          })}
                        >
                          <span>{suggestion.description}</span>
                        </div>
                      );
                    })}
                  </div>
                </div>
              )}
            </PlacesAutocomplete>
          )}
         </Field>

I'm wondering how I add the input of the placeautocomplete into this value here:

<pre>{JSON.stringify(values, undefined, 2)}</pre>

Answer 1

Sorry my answer is old, but try using react-google-places-autocomplete. Much better here is how you can use it....

<Field name="city">
    {({ input, meta }) => (
        <div style={{ width: '100%' }}>
            <GooglePlacesAutocomplete
                selectProps={{
                    value: input.value,
                    onChange: e => {
                        input.onChange(e.label)
                    },
                }}
                apiKey={GOOGLE_API_KEY}
                autocompletionRequest={{
                    componentRestrictions: {
                        // country: [values.group_country && values.group_country.value]
                        country: ['CA', 'GB', 'US']
                    },
                    types:['(cities)']
                }}
            />
            {meta.error && meta.touched && 
                <span className="text-danger small block">{meta.error}</span>}
        </div>
    )}
</Field>

Answer 2

The answer is really help but I found the input field was empty after I selected the address so I removed one line "value: input.value," it works for me.