Mouse click not always working


#1

I’ve successfully implemented a leafletjs map with leaflet search control in my ionic 3 app. However, the search results returned by leaflet search control are not always selectable by mouse, i.e. clicking on a search result does nothing.

If I open the map page directly, the search results are not clickable. Mouse scrolls work in paging through search results. Keyboard up/down arrow + enter works in selecting a result. Clicking anywhere on the map first, then the search results become clickable and all subsequent searches are fine.

If I create a page with a link to the map page, click on the link, then the search results on the subsequent map page are clickable. If on the first page, I try an auto refresh such as navCtrl.push(‘map-page’), then the search results are not clickable.

Given that clicking anywhere on the map first makes the results selectable, I also tried

document.getElementById(‘map’).focus()
and
document.getElementById(‘map’).click()
but neither works

It feels like something is hijacking the click event but I cannot figure out what.