So I am using the google maps api to fill out some information on the backend but if the user doesn't 'click' on a dropdown option, the backend never gets populated with the data.
I found a workaround on stack overflow here: link but nothing fires on blur/focusout.
let address = document.getElementById('inputAddress');
(function pacSelectFirst(input) {
// store the original event binding function
var _addEventListener = (input.addEventListener) ? input.addEventListener : input.attachEvent;
function addEventListenerWrapper(type, listener) {
// Simulate a 'down arrow' keypress on hitting 'return' when no pac suggestion is selected,
// and then trigger the original listener.
if (type == "keydown" || type == 'blur') {
var orig_listener = listener;
listener = function(event) {
var suggestion_selected = $(".pac-item-selected").length > 0;
// if [enter] or [tab] is pressed
if ((event.which == 13 || event.which == 9) && !suggestion_selected) {
var simulated_downarrow = $.Event("keydown", {
keyCode: 40,
which: 40
});
orig_listener.apply(input, [simulated_downarrow]);
}
orig_listener.apply(input, [event]);
};
}
_addEventListener.apply(input, [type, listener]);
}
input.addEventListener = addEventListenerWrapper;
input.attachEvent = addEventListenerWrapper;
var autocomplete = new google.maps.places.Autocomplete(input);
})(address);
I understand what the code is doing. When you click tab or enter, it simulates a down arrow press. I tried adding in a listener for blur but nothing works. The event still gets fired but it doesn't select or update.
Would love some help regarding this situation. Thank you!