Mapbox Address Provider

[jessedobbelaere]

I'm looking for a good Address Provider, but when scanning the Formie address provider docs, it's either:

• Google (which I try to stay away from)
• Algolia Places (⚠️ is sunsetting: https://www.algolia.com/blog/product/sunsetting-our-places-feature/ and might start breaking end of 2024. Might need to put a warning message in the Formie docs or plugin to prevent new integrations?)
• Address Finder (specifically for NZ and AUS)
• Loqate (quite pricey)

None seem like great options to me. Algolia recommends switching to Mapbox or Placekit.io

Any chance for Mapbox integration to get on the roadmap as a replacement for Algolia Places?
Meanwhile, i'll try to build a custom address provider integration for my projects, but would be good to have an official integration.

• https://www.mapbox.com/address-autofill ✨
• https://docs.mapbox.com/mapbox-search-js/api/web/autofill/
• https://docs.mapbox.com/api/search/geocoding/

[engram-design]

Great idea, we’ll add that to our todo list.

https://placekit.io/ Is also a new one for me, looks slick!

[jessedobbelaere]

I made a (custom) integration using a craft module, for the Mapbox autofill SDK with Formie.
Some quick and dirty snippets: https://gist.github.com/jessedobbelaere/96cc7fc72dc9c3d29a11a1500e7aedd6

Things I learned so far:

• Mapbox autofill is still in beta (https://api.mapbox.com/search-js/v1.0.0-beta.18/web.js) but works fine already for my use case.
• Formie uses a separate Autocomplete field for an address provider. But Mapbox can only add a suggest box to the main address field (the one with autocomplete="address-line1") as the autofill field (https://docs.mapbox.com/mapbox-search-js/tutorials/add-address-autofill-to-your-website/#set-up-autocomplete-tags) and I don't think you can configure a separate input field to get the dropdown...
• There's a weird issue where I start typing in the input field, and I can only type one character, then focus is removed, and I have to re-click/re-focus the input field to continue typing. I removed the Formie's JS code and then it works fine, so it's some collision between Formie and Mapbox.

I pinpointed that last issue:

Formie dispatches a CustomEvent called input as part of formie-form-base.js:

this.addEventListener($input, 'input', (event) => {
    $wrapper.dispatchEvent(new CustomEvent('input', {
        bubbles: false,
        detail: {
            input: event.target,
        },
    }));
});

But Mapbox is listening for the input event as well, and somehow it collides. It's not bouncer.js (I disabled the lib while debugging) but purely the input event that gets redispatched 🤔 If i comment out the dispatch in Formie, then Mapbox works fine. For now a dirty hack fixes it on my side. Curious how the official Mapbox integration will mitigate the issue 🤞

// Reset focus on the address input field
this.$input.addEventListener('input', () => {
    setTimeout(() => this.$input.focus(), 10);
});

[engram-design]

Appreciate the research into this, will add it to the #1671 notes!