title: Prevent Google place autocomplete from closing pick list (pac-container) when clicking outside pick list
body: <p>I want the Google place autocomplete pick list not to hide when I click outside the pick list so that the results remain visible.</p>
  <p><a href="https://i.stack.imgur.com/VjEF6.png" rel="nofollow noreferrer">Example image pick list</a></p>
  <p><strong>Example video</strong><br>
  Example video in which the pick list closes unwanted with a click outside the pick list:<br>
  <a href="https://vimeo.com/563347070" rel="nofollow noreferrer">https://vimeo.com/563347070</a></p>
  <p><strong>Inspect Element</strong><br>
  In the Google Inspect Element tool it can be seen that pac-container gets the style <code>display: none;</code> when clicking outside pick list:<br>
  <a href="https://vimeo.com/563350922" rel="nofollow noreferrer">https://vimeo.com/563350922</a></p>
  <p><strong>HTML</strong></p>
  <pre><code>    &lt;div class=&quot;content&quot;&gt;
          &lt;div id=&quot;search-container&quot;&gt;
              &lt;a class=&quot;icon-container&quot;&gt;&lt;img src=&quot;./Sources/Icons/arrow-back-outline.svg&quot; id=&quot;backbtn&quot; /&gt;&lt;/a&gt;
              &lt;form action=&quot;#&quot; method=&quot;post&quot; class=&quot;searchfield&quot;&gt;
                &lt;label for=&quot;userAddress&quot;&gt; 
                  &lt;input name=&quot;userAddress&quot; id=&quot;searchfield&quot; type=&quot;text&quot; placeholder=&quot;where do you want to go?&quot; value=&quot;&quot; onfocus=&quot;this.value = this.value;&quot;/&gt;
                &lt;/label&gt;
              &lt;/form&gt;
              &lt;a class=&quot;icon-container&quot;&gt;&lt;img src=&quot;./Sources/Icons/close-circle-outline.svg&quot; id=&quot;emptybarbtn&quot; /&gt;&lt;/a&gt;  
            &lt;/div&gt;
            &lt;div id=&quot;resultAutocompletePlaces&quot;&gt;&lt;/div&gt;
            &lt;button id=&quot;checkUserLocation&quot;&gt;Current location&lt;/button&gt; 
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  <p><strong>Javascript</strong></p>
  <pre><code>function initializePlacesService() {
      //initialize places service to perform TextSearch
      var input = document.getElementById('searchfield');
      var options = {
        types: []
      };
      
      autocomplete = new google.maps.places.Autocomplete(input, options);
  
      //places pac-container inside #resultAutocompletePlaces div
      setTimeout(function(){ 
        $(&quot;.pac-container&quot;).prependTo(&quot;#resultAutocompletePlaces&quot;);
    }, 300)
  };
  
  $(function(){
      initializePlacesService(); 
   });
  </code></pre>
  <p><strong>Question</strong><br>
  How can I make sure that the pick list is not hidden when clicked outside of it?</p>