Ionic-framework: Ionic Modal with ngMap using Google Place Autocomplete Won't Select Prediction

[mtpultz]

Short description of the problem:

Clicking/selecting a prediction from the Google places dropdown that is within a modal doesn't trigger the on-place-changed event, see Codepen below. Using data-tap-disabled on the map wrapper and the .pac-container both don't allow the selecting of the predictions. Seems related to #1798, but the solution doesn't work in a modal. This solution is applied in the Codepen to demonstrate it isn't working.

What behavior are you expecting?

Being able to trigger the on-place-changed when selecting a prediction from the Google places dropdown. This works in a normal view that contains a map, but not when the map is in a modal.

Steps to reproduce:

1. Use Google map Places in a modal, see Codepen below.

insert any relevant code between the above and below backticks

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)

Which Ionic Version? 1.2.x

Plunker that shows an example of your issue

http://codepen.io/mtpultz/pen/PNyMKv?editors=0010

Run ionic info from terminal/cmd prompt: (paste output below)

Cordova CLI: 6.0.0
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Version: 1.2.4
Ionic CLI Version: 1.7.14
Ionic App Lib Version: 0.7.0
OS:
Node Version: v5.3.0

[mtpultz]

Got this working using this fix, but we don't like using jQuery in our AngularJS applications so I changed it a bit to be within the AngularJS API with a bit of native JavaScript.

Markup

<input placeholder="Search for places" 
       ng-model="locationCtrl.event.location"
       on-place-changed="locationCtrl.placeChanged()"
       places-auto-complete
       ng-focus="locationCtrl.disableTap($event)">

Controller

vm.disableTap = function(event) {

    var input = event.target;

    // Get the predictions element
    var container = document.getElementsByClassName('pac-container');
    container = angular.element(container);

    // Apply css to ensure the container overlays the other elements, and
    // events occur on the element not behind it
    container.css('z-index', '5000');
    container.css('pointer-events', 'auto');

    // Disable ionic data tap
    container.attr('data-tap-disabled', 'true');

    // Leave the input field if a prediction is chosen
    container.on('click', function(){
        input.blur();
    });
};