CODEWITHSUNDEEP
javascriptgoogle-maps-api-3
Clifford Yen
Clifford Yen

Reputation: 23

How to adapt Event DOM Listener to Google Maps JavaScript API v3.35

I used to use the following code to catch users' Enter key event and automatically pick the first result from the Autocomplete results (pac-items) if users haven't selected any of them (i.e., there is no pac-item marked as pac-item-selected).

var input = document.getElementById('pac-input')
var autocomplete = new google.maps.places.Autocomplete(input)

google.maps.event.addDomListener(input, 'keypress', function(e) {
    if (e.keyCode===13 && !e.triggered) {
        var suggestion_selected = document.querySelectorAll('.pac-item-selected').length > 0
        if (!isLatLngInInputBox && !suggestion_selected) {
            google.maps.event.trigger(this,'keydown',{keyCode:40})
            google.maps.event.trigger(this,'keydown',{keyCode:13,triggered:true})
        }
    }
})

However, started from Google Maps JavaScript API v3.35, I would get an error like Uncaught TypeError: a.stopPropagation is not a function raised in the line of google.maps.event.trigger(this,'keydown',{keyCode:40}).

As a result, I checked the documentation and noticed that trigger method of google.maps.event has changed. The third argument is now stated as eventArgs instead of var_args.

I tried to figure out how to adapt to it and modified the code like:

google.maps.event.addDomListener(input, 'keypress', function(e) {
    console.log(e.key)
    if (e.key==="Enter" && !e.triggered) {
        var suggestion_selected = document.querySelectorAll('.pac-item-selected').length > 0
        if (!isLatLngInInputBox && !suggestion_selected) {
            google.maps.event.trigger(this,'keydown',{key:"ArrowDown"})
            google.maps.event.trigger(this,'keydown',{key:"Enter",triggered:true})
        }
    }
})

Although the Enter key can be captured perfectly, the ArrowDown key does not work as intended.

In fact, I can capture the ArrowDown key with console.log(e.key), but nothing really happens. Also, console.log(e.key) does not catch anything when I press the ArrowDown key on my keyboard, which makes me so confused.

Does anyone encounter similar problem? Thanks for any suggestion!

Upvotes: 2

Views: 1184

Answers (1)

Ergec
Ergec

Reputation: 11824

Use new Event() to create proper event object as third parameter and also keydown instead of keypress in your addDomListener

var input = document.getElementById('pac-input')
var autocomplete = new google.maps.places.Autocomplete(input)
google.maps.event.addDomListener(input, 'keydown', function(e) {
  var suggestion_selected = document.querySelectorAll('.pac-item-selected').length > 0
  if (suggestion_selected) {
    console.log(document.querySelectorAll('.pac-item-selected'));
  } else {
    if (e.key === "Enter" && !e.triggered) {
      var ex1 = new Event('keydown');
      ex1.code = "ArrowDown";
      ex1.key = "ArrowDown";
      ex1.keyCode = 40;
      google.maps.event.trigger(this, 'keydown', ex1);

      var ex2 = new Event('keydown');
      ex2.code = "Enter";
      ex2.key = "Enter";
      ex2.keyCode = 13;
      ex2.triggered = true;
      google.maps.event.trigger(this, 'keydown', ex2);
    }
  }
});

Edit:

I have a working fiddle here https://jsfiddle.net/ergec/e6wsdb85/

Upvotes: 6

Related Questions