Can't access search bar on touch screen

[heather-ea]

The search bar doesn't seem to be accessible on touch screens. Has anyone been able to get this working for phones/tablets?

[smeijer]

The demo is working fine for me. Can you describe the problem a bit more specifically?

[heather-ea]

That's strange. Unfortunately the demo doesn't work on my phone (iPhone 6s). When I click on the search bar, it acts as if I have just clicked somewhere on the map. For example, double clicking on the search bar zooms in on the map, and no cursor appears to type in an address. I am using the "bar" style with OSM.

[michaelhobbs]

I have a work-around. var searchControl = new Lgeo.GeoSearchControl({...}); searchControl.searchElement.elements.input.addEventListener("click", function(){ this.focus(); });

Note that this is just a work-around and probably a more elegant solution would be to add a library like hammer.js or any of these.

[smeijer]

Thanks for the work-around @michaelhobbs. Are you willing to add it to searchElement.js and open a PR?

[hanginwithdaddo]

Be careful... this problem is usually the result of preventing the default behavior or stopping the propagation of mousedown events. Ensure that your application software or the GeoSearch control is not doing something like this. The default behavior of the browser/document seeing a mousedown event is to effectively invoke select() on the target receiving the mosuedown event, which gives the control input focus.

[michaelhobbs]

@smeijer I've never written ES6 and have never worked with a project with code like this one. Once I have set up the project locally and can test changes, I will make a pull request.

[smeijer]

Closing this one; as i cannot reproduce it. Both my notebook (with touchscreen), as my android device work just fine on the latest demo page.

Please let me know if there are still issues. It would be awesome if one can point out where it must be. As @hanginwithdaddo said, we should watch out for killing default behavior. Unfortunately, leaflet is stuffed with preventDefaullts and stopPropagations.

This library also uses a couple, for example; to prevent map zooming, when clicking in the search input.

[neilyoung]

Pretty old this problem, but I can reproduce. The key is: It does not work on an iPad or so, if style is bar. The other thing works.