OS X Command+V

[neseleznev]

_geocode is not invoking while user pastes searchInput via Cmd+V on OS X.

The issue is supposed to by fixed in the following line

mapbox-gl-geocoder/lib/index.js

Line 119 in 53d06d8

if (e.metaKey || [9, 27, 37, 39, 13, 38, 40].indexOf(e.keyCode) !== -1) return;

since Cmd is a metaKey.

Probably, it could be checked by something like e.code === 'MetaLeft' || e.code === 'MetaRight' || e.code === 'OSLeft' || e.code === 'OSRight';

I'm not a web developer, correct me if I'm wrong

[andrewharvey]

Which version of mapbox-gl-geocoder are you using?

Does it not open the suggestions list after pasting or just it won't paste into the input at all?

The latest version fixed paste events with tristen/suggestions#17 see https://github.com/mapbox/mapbox-gl-geocoder/blob/master/CHANGELOG.md could you confirm you're still seeing this with v2.1.2?

[ingalls]

Stale - Feel free to reopen if you are still having problems.

[matrad]

Still seeing this issue on v2.2.0 with Chrome 67.0.3396.99 x64 (newest build) and OSX 10.13.3

[gtk-hs]

Hey all! I'm currently seeing this issue on modern FF(68.0 )/chrome(75.0.3770.142)/Safari(12.1.2) OS X on our production site, and even on the mapbox website:

https://docs.mapbox.com/help/tutorials/local-search-geocoding-api/

I've tried manually dispatching the change/keyup/keydown event on the target input field, but can't get it to populate the geocode dropdown UI.

This can be a painful UX experience for our users that are confused as to why pasting a valid address returns no response in the UI.

If you can get the dropdown to trigger on paste, that would be ideal, as users will see immediate feedback and pick the proper result. Also if hitting the enter key while focused on that dropdown kicked off the geocoder dropdown UI I think that would help as well (although hitting any OTHER key does appear to have the desired effect). While I'm at it I feel clicking the "search" svg icon when text is pasted in should probably kick off that UI as well (although it might be unnecessary if the paste event worked in the first place).

In the meanwhile, is there anyway I can programmatically kick off the dropdown of geocode results so I can reduce friction on end users who are having a hard time figuring this out?

[Grsmto]

@gtk-hs did you figure out a workaround for this? Or is there a fork available with a fix?

Edit: #158

[gtk-hs]

@Grsmto Nope, paste still doesn't trigger the geocoder dropdown UI! We've just told support to tell users not to paste into that field (it hurts that this is true).

Please bug the developer, but this bug has been in the wild for two years so it might be time to start looking for a better supported geocoding solution.

[andrewharvey]

Please bug the developer, but this bug has been in the wild for two years so it might be time to start looking for a better supported geocoding solution.

This is an open source project, please feel free to submit a PR if you manage to fix it.

[gtk-hs]

@andrewharvey my apologies, I must have confused this project with an enterprise product sold at www.mapbox.com, I'll contact their support team directly, sorry for any confusion!

[yapalexei]

For those still looking for options I had come up with one for our product that works for us. One could add a 'paste' || 'input' event listener to the input (search) field.

something like:

map.on("load", function() {

    const mapboxGeocoder = new MapboxGeocoder({
        accessToken: mapboxgl.accessToken,
        mapboxgl: mapboxgl
    });

    map.addControl(mapboxGeocoder);
    // The instance of MapboxGeocoder has a container property that you can query for the input field.
    // Although, document.querySelector('input.mapboxgl-ctrl-geocoder--input') could work too
    const inputField = mapboxGeocoder.container.querySelector('input.mapboxgl-ctrl-geocoder--input');

    if (!inputField) return

    inputField.addEventListener('paste', () => {
        const text = (event.clipboardData || window.clipboardData).getData('text');
        if (text && text.length > 2) {
            // This is the magic right here.
            mapboxGeocoder.query(text);
        }
    });
});

The only caveat is the call mapboxGeocoder.query(text) opens the dropdown and then takes you to the first location listed; though the drop down remains open.

[yapalexei]

Also here's a working example: https://codepen.io/yapalexei/pen/poozzaO?editors=0010

[andrewharvey]

@yapalexei This looks like the solution proposed in #300, if you wanted to see this fixed in core it would be great if you could test out #300 to see if it works for you.

[yapalexei]

@andrewharvey you're right! I should have checked that PR. I will check it out.

[scottsfarley93]

this was fixed in #300 and will be available in the upcoming v4.5.0 release.

[Pritzomania]

For those still looking for options I had come up with one for our product that works for us. One could add a 'paste' || 'input' event listener to the input (search) field.

something like:

map.on("load", function() {

    const mapboxGeocoder = new MapboxGeocoder({
        accessToken: mapboxgl.accessToken,
        mapboxgl: mapboxgl
    });

    map.addControl(mapboxGeocoder);
    // The instance of MapboxGeocoder has a container property that you can query for the input field.
    // Although, document.querySelector('input.mapboxgl-ctrl-geocoder--input') could work too
    const inputField = mapboxGeocoder.container.querySelector('input.mapboxgl-ctrl-geocoder--input');

    if (!inputField) return

    inputField.addEventListener('paste', () => {
        const text = (event.clipboardData || window.clipboardData).getData('text');
        if (text && text.length > 2) {
            // This is the magic right here.
            mapboxGeocoder.query(text);
        }
    });
});

The only caveat is the call mapboxGeocoder.query(text) opens the dropdown and then takes you to the first location listed; though the drop down remains open.

@yapalexei "...though the drop down remains open" - Any idea on the best way to close the dropdown after triggering the mapboxGeocoder.query method?