address-autocomplete | Polymer address form element that offers suggestions | Web Framework library

I have an input field (let's call it $addressInput) in which I ask the user to provide his address.

I then use this address in my back-end to retrieve the latitude and the longitude of the address.

For some addresses, like for example this one "214 Avenue du Général Leclerc, Eaubonne, France", if a user enters this address, google maps autocomplete will suggest two different addresses to the user in the autocomplete dropdown. The first one (= suggestion A) is "214 Avenue du Général Leclerc, Eaubonne, France" and the second one (=suggestion B) is "214 Rue du Général Leclerc, Eaubonne, France".

But if the user clicks on suggestion A, although the input is filled with "214 Avenue du Général Leclerc, Eaubonne, France", the real formatted_address returned by google maps autocomplete is not the same as suggestion A, it is "214 Avenue de la Division Leclerc, 95160 Montmorency, France".

Why doesn't google maps autocomplete suggest straight away the real formatted_value in the dropdown? Why does it show the user an adress in the dropdown, but internally uses a different formatted address? Is it possible to force the autocomplete API to display the formatted_address in the choice dropdown? In this case, I would have suggestion A = "214 Avenue de la Division Leclerc, 95160 Montmorency, France" (instead of "214 Avenue du Général Leclerc ...") and suggestion B = "214 Rue du Général Leclerc, Eaubonne, France"

Please find below the code that allowed me to know this:

I have an address drop-down list. If the address that I typed is not listed then there is a footer option 'Address not listed? Show more ?' When I select that option it's giving me an option to manually enter my address. I want to select that 'Address not listed? Show more ?' option.

In my code, I have the following support method to select the address by index. But I want to select by a given text. Helps much appreciated. Thanks

Parts of my app are built using VueJS. The complete app is built on top of the Laravel framework, so I use Laravel Mix to compile my css/js-assets. To gather a better overview, I've put parts of my application in seperated packages, e.g.:

• app
• bootstrap
• config
• ...
• packages
  • catalog
  • resources
  • js
    • Components
    • CatalogComponentA.vue
    • ...
    • catalog.js
• ...
• resources
  • assets
  • js
  • VueComponents
    • ComponentA.vue
    • ...
  • app.js

Running npm locally (either in Homestead/Vagrant or under my OS) works absolutely fine. Deploying it to my webserver results in an error saying that the dependencies were not found:

I have a form with a field that needs to show suggestions via an api call. The user should be allowed to select one of those options or not and that value that they type in gets used to submit with the form, but this field is required. I am using Formik to handle the form, Yup for form validation to check if this field is required, downshift for the autocomplete, and Material-UI for the field.

The issue comes in when a user decides not to use one of the suggested options and the onBlur triggers. The onBlur always resets the field and I believe this is Downshift causing this behavior but the solutions to this problem suggest controlling the state of Downshift and when I try that it doesn't work well with Formik and Yup and there are some issues that I can't really understand since these components control the inputValue of this field.

Heres what I have so far: