JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&amp;key="></script>
<p>
If you click (or tab) directly into either of these inputs, they're fully functional Google autocompletes. If you instead click the focus button (which just does a jQuery <code>.trigger('focus')</code>) then the one without another event listener will work fine, but the one with the event listener wonlt work at all, until it's manually focussed.
</p>

<hr>

<strong>Input with focus event listener</strong><br>
<input class="withListener">
<button>Focus the input!</button>

<hr>

<strong>Input without focus event listener</strong><br>
<input class="withoutListener">
<button>Focus the input!</button>

JavaScript

$('button').on('click', function() {
  $(this).prev('input').trigger('focus')
})
$('input.withListener').on('focus', function() {
	//This literally does nothing!
})

new google.maps.places.Autocomplete($('input.withListener')[0])
new google.maps.places.Autocomplete($('input.withoutListener')[0])