Mobile Safari issues

[mapbox]

Mobile Safari issues

[zackphilipps]

I got the keyboard to close by calling document.activeElement.blur() on result, for those finding themselves in a similar boat.

[zackphilipps]

@tristen any chance you could take a look at this by the end of the week? I've tried adding my own event listeners to ul.suggestions any which way I could think of and just. Nothing works. :( Not sure if the fix needs implemented in Suggestions or List...

[zackphilipps]

Actually, it appears that the issue is with the geocoder itself... This demo works fine on mobile... the problem is, the geocoder's result event is not firing at all when tapping one of the autocomplete suggestions.

[tristen]

👋 @zackphilipps are you reproducing this on https://www.mapbox.com/mapbox-gl-js/example/mapbox-gl-geocoder/? I'm on iOS 9.3.5 but I'm able to select results from the autocomplete listing.

[zackphilipps]

Well... rats... I can select results from that demo page, too...

The only difference I can readily see is that I actually have multiple geocoders on one map. Here's my code (I've commented out any possible offenders):

code snippet

jQuery(document).ready(function($) {

  $('.nav-tabs a').click(function(e) {
    e.preventDefault()
    $('.nav-tabs li, .tab-pane').removeClass('active')
    $(this).parents('li').addClass('active')
    $($(this).attr('href')).addClass('active')
  })

  $('.back-to-home').click(function(e) {
    e.preventDefault()
    backToHome()
  })

  // $(document).on("keydown", ".geocoder-form", function(e) {
  //   if (e.metaKey || [9, 27, 37, 39, 13, 38, 40].indexOf(e.keyCode) !== -1) return
  // })

  var token = 'pk.bloop'
  mapboxgl.accessToken = token

  var map = new mapboxgl.Map({
      container: 'dealer-locator',
      style: 'mapbox://styles/bloop'
    }),
    geocoder = new mapboxgl.Geocoder({
      container: 'geocoder',
      placeholder: 'Zipcode',
      country: 'us,ca',
      types: 'postcode',
      autocomplete: false
    }),
    panelZipGeocoder = new mapboxgl.Geocoder({
      container: 'panel-zip-geocoder',
      placeholder: 'Zipcode',
      country: 'us,ca',
      types: 'postcode',
      autocomplete: false
    }),
    panelStateGeocoder = new mapboxgl.Geocoder({
      container: 'panel-state-geocoder',
      placeholder: 'State',
      country: 'us,ca',
      types: 'region',
      autocomplete: false
    })

  // if (Modernizr.touch) {
  //   map.dragPan.disable()
  //   map.doubleClickZoom.disable()
  //   map.scrollZoom.disable()
  //   map.keyboard.disable()
  // }

  // disable map rotation using right click + drag
  map.dragRotate.disable()

  // disable map rotation using touch rotation gesture
  map.touchZoomRotate.disableRotation()

  map.addControl(geocoder)
    .addControl(panelZipGeocoder)
    .addControl(panelStateGeocoder)

  // $('.geocoder-form').submit(function(e) {
  //   e.preventDefault()
  //   var val = $(this).find('.mapboxgl-ctrl-geocoder input').val()
  //   console.log(val)
  //   if(val != '') {
  //     document.activeElement.blur()
  //   }
  //   dataLayer.push({
  //     'event' : 'geocoder-form-submitted'
  //   })
  //
  //   var offset = $('.sliding-panel').offset(),
  //     offset = offset.top - $('#header_wrapper').height()
  //
  //   $('html, body').animate({
  //     scrollTop: offset
  //   }, '250')
  // })


  map.on('load', function() {
    $.getJSON('bloop.json', function(data) {
      console.log(data)
      map.addSource('points', {
        "type": "geojson",
        "data": data
      })
      map.addLayer({
        "id": "points-layer",
        "source": "points",
        "type": "symbol"
      })

      // When a click event occurs near a polygon, open a popup at the location of
      // the feature, with description HTML from its properties.
      map.on('click', function (e) {
        var point = turf.point([e.lngLat.lng, e.lngLat.lat]),
          fc = turf.featureCollection(data.features),
          nearest = turf.nearest(point, fc),
          popup = new mapboxgl.Popup()
            .setLngLat(nearest.geometry.coordinates)
            .setHTML($('.result[data-id="' + nearest.properties.id + '"]').html())
            .addTo(map)
      })

      var filteredData = data

      $('.search-filters a').click(function(e) {
        e.preventDefault()
        var filter = $(this)

        filteredData = {
          "type": "FeatureCollection",
          "features": []
        }

        $('.search-filters a').not('.' + filter.data('filter')).removeClass('active')
        filter.toggleClass('active')

        $.each(data.features, function(index, feature) {
          var services = feature.properties.services
          if(filter.hasClass('active')) {
            if((services.sales === 1 && filter.data('filter') === 'sales') ||
            (services.service === 1 && filter.data('filter') === 'service') ||
            (services.parts === 1 && filter.data('filter') === 'parts')) {
              filteredData.features.push(feature)
            }
          } else {
            filteredData = data
          }
        })
        console.log(filteredData)
      })

      geocoder.on('result', function(ev) {
        console.log('result!')
        $('.search-container').hide()
        $('.sliding-panel').show()

        // $('#panel-zip-geocoder input').val($('#geocoder input').val())
        // $('#geocoder-form').submit()

        locateDealerByZip(map, filteredData, ev)
      })

      panelZipGeocoder.on('result', function(ev) {
        locateDealerByZip(map, filteredData, ev)
        // $('#panel-zip-geocoder-form').submit()
      })
      panelStateGeocoder.on('result', function(ev) {
        locateDealerByState(map, filteredData, ev)
        // $('#panel-state-geocoder-form').submit()
      })
    }).fail(function(msg) {
      console.log(msg.responseText)
    })
  })
})

What do you think? I'm going to try using the contributor kit again and see if adding another geocoder screws up the mobile experience.

[zackphilipps]

@tristen I tested the example bundled with the npm package on mobile... Used multiple geocoders... Worked fine. Unless you have some more insight regarding my above code, or mixing JS and jQuery breaks it for some reason, I'm going to assume it's a conflict with another script on the site... (probably Gravity Forms).

Thanks for your help!

[zackphilipps]

Ha... It's not gravity forms... Really sucks when you can't get a console error to debug.

[zackphilipps]

Removed almost all other scripts and it still happened. No clue. I'll leave this here for you to close or whatevs.

Thanks again.

[zackphilipps]

FWIW, I was able to get around this issue by calling geocoder.query() within $(body).on('click', '.suggestions li a'). I was trying .suggestions li before, but it needs to be .suggestions li a for iOS Safari because a has the cursor: pointer style applied. See http://stackoverflow.com/a/10577976/3945351

[tristen]

Hmm thanks for the followup @zackphilipps targeting the li element instead of the anchor is a little wacky. I'll follow up soon here in https://github.com/tristen/suggestions/

[jasoncoding]

👋 @zackphilipps are you reproducing this on https://www.mapbox.com/mapbox-gl-js/example/mapbox-gl-geocoder/? I'm on iOS 9.3.5 but I'm able to select results from the autocomplete listing.

@tristen sorry to necro this thread but I'm having exactly the same problem and it now appears that geocoder example you linked is having issues with iOS safari. Type anything in it and it only says "There was an error reaching the server". I'm testing on iOS 12.3.1