Mapbox SearchBox do not support mouse-click when selecting a suggestion

Question

I'm trying to implement an address search bar using SearchBox from Mapbox API (@mapbox/search-js-react).

The problem here seems to be that the component , react component that provides an interactive search box, powered by the Mapbox Search Box API, do not support mouse-click when selecting a suggestion, only Enter-key. Also worth mentioning that this only occurs on windows, but not on mac.

According to their documentation (https://docs.mapbox.com/mapbox-search-js/api/react/search/#searchboxprops#onretrieve), onRetrieve should fire off when selecting a suggestion, which doesn't work for me.

    <SearchBox
       accessToken={MAPBOX_ACCESS_TOKEN}
       value={address}
       onChange={setAddress}
       onRetrieve={(res) => console.log("Selected", res)}
    </SearchBox>

Is there any workaround this?

I have tried to see their examples on their web page, and the same problem seems to occur.

Answer 1

I have a similar problem on a project I am working on. I tried debugging it, but I was able to click the suggestions in some cases, being:

1. Click with mouse - WORKS
2. Arrow Down + enter - WORKS
3. Note book touch pad - DOES NOT WORK

I am not a very specialized front end developer, but I found it really strange, never stumbled on an issue related to an event not being triggered by touch pad click