mercredi 26 août 2015

jQuery Geocomplete options not tappable in Emberjs Cordova app

I'm using the jQuery Geocomplete plugin as a component in my Emberjs Cordova app as an address picker. It works fine in the browser, but when built in iOS, none suggested PAC items are clickable.

My component template:

<form {{ action "saveAddress" on="submit" }}>
  {{input value=addressInput type=textfield class="address-input" placeholder="Enter an address" action="locateAddress" on="key-press"}}
  {{input type="text" value=formattedAddress name="formatted_address" placeholder="Address" class="formatted-address"}}
  <input type="submit" value="Add Address"/>
</form>

And my component

  actions: {
    saveAddress: function() {
      this.sendAction('saveAddress', {
        formattedAddress: this.$("input.formatted-address").val()
      });
    },
    locateAddress: function () {
      this.$("input.address-input").geocomplete({
        map: "#map",
        details: "form"
      });

    }
  }

I have seen people refer to using the following code as a hack that fixes the problem, but it doesn't seem to work for me:

$(document).on({
  'DOMNodeInserted': function() {
    $('.pac-item, .pac-item span', this).addClass('needsclick');
    }
  }, '.pac-container');

When I press Enter on the iPhone keyboard it picks the first item on the list and enters it. But tapping does nothing. Anyone any ideas?




Aucun commentaire:

Enregistrer un commentaire