title: Not able to hide the search when the user clicks outside of search bar in Ionic
body: <p>I am working in my Ionic App and I have added a search bar in my Ionic app but the problem is that when I click outside of search result, the search bar should hide but it is not hiding and the result is also there. </p>
  
  <p>I want when the user clicks outside of the search bar, it should hide the search bar and it should also clear the results.</p>
  
  <p>This is my <strong>app.html</strong>:</p>
  
  <pre><code>  &lt;ion-navbar&gt;
      &lt;button ion-button menuToggle start&gt;
        &lt;ion-icon name="menu"&gt;&lt;/ion-icon&gt;
      &lt;/button&gt;
      &lt;div class="mydiv2"&gt;
        &lt;ion-icon name="search" class="myicon22" (click)="hasSearchnot()"&gt;&lt;/ion-icon&gt;
      &lt;/div&gt;
    &lt;/ion-navbar&gt;
    &lt;ion-searchbar *ngIf="HasSearch" (input)="setSearchProducts($event)"&gt;&lt;/ion-searchbar&gt;
    &lt;ion-list *ngIf="HasSearch"&gt;
      &lt;ion-item *ngFor="let item of finalproductsearch" (click)="showProductDetails(item)"&gt;
        &lt;ion-thumbnail item-start&gt;
          &lt;img src="{{'images.pro_images}}"&gt;
        &lt;/ion-thumbnail&gt;
        {{ item.product_name }}
      &lt;/ion-item&gt;
    &lt;/ion-list&gt;
  </code></pre>
  
  <p>In this view, I have a search icon and when the user clicks on the search icon the search bar will open.</p>
  
  <p>This is my <strong>app.component.ts</strong>:</p>
  
  <pre><code>HasSearch: boolean;
  hasSearchnot()
  {
      this.HasSearch = !this.HasSearch;
  }
  
  getsearchproducts()
  {
      this.restProvider.getproductsforsearch()
        .then(data =&gt; {
        this.searchproduct = data;
        this.finalseaproduct = this.searchproduct.msg;
        });
  }
  </code></pre>
  
  <p>My search results are showing fine but the problem is that when I click outside of the search results, it should close the search bar and clear the search results but this is not happening.</p>
  
  <p>When I move to the next page, the previous search results are still there. I want to clear the search results when the user moves to the next page.</p>
  
  <p>Any help is much appreciated.</p>