CODEWITHSUNDEEP
angularjsgoogle-maps-api-3
camden_kid
camden_kid

Reputation: 12813

Google Place Autocomplete affecting key down behaviour in input

In this Plunker there is an input with Google Place Autocomplete attached.

When it has focus and the tab key is used the $scope.data.keyDown function is called but the text of the input is not updated. Without the attachment the input text is changed to "hello". You can see this by simply commenting out the attachment line

  // var autoComplete = new google.maps.places.Autocomplete(placeAutoCompleteInput, {types: ['(cities)']});

Why does Autocomplete have this effect and is there a way round it?

JS

angular.module('app', []);

angular.module('app').controller('ctrl', function ($scope, $element) {
  $scope.data = {};

  var placeAutoCompleteInput = $element[0].querySelector('#place');
  var autoComplete = new google.maps.places.Autocomplete(placeAutoCompleteInput, {types: ['(cities)']});

  $scope.data.keyDown = function($event) {
    if ($event.keyCode == 9) { // Tab key
        $scope.data.text = "hello";
    }
  }
});

Markup

<!doctype html>
<html>
  <head>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.js"></script>
    <script src="example.js"></script>
  </head>

<body ng-app="app" ng-controller="ctrl">
  <input id="place" ng-model="data.text" ng-keydown="data.keyDown($event)">
</body>
</html>

Upvotes: 2

Views: 1291

Answers (1)

codeepic
codeepic

Reputation: 4112

Here's the working plnkr solution for you

$scope.data.keyDown = function($event) {
    console.log("keyDown", $event);
    if ($event.keyCode == 9) { // Tab key

        $scope.data.text = "hello";

        //fix
        placeAutoCompleteInput.addEventListener('blur', function() {
          placeAutoCompleteInput.value = $scope.data.text;
        });

    }
  };

Follow this link to stackoverflow question and read Nicholas Ryan Bowers answer for more insight.

Upvotes: 1

Related Questions