behaviour

src/components/site-header/site-search/site-search.tsx

@@ -54,16 +54,7 @@ export class SiteSearch {
     this.isSearchPanelOpen = false;
   }
 
-  // Close the search panel if user clicks anywhere outside the Search component.
-  @Listen('click', {target: 'window'})
-  handleWindowClick(event) {
-    if (event.target.tagName.toLowerCase() !== 'hy-site-search') {
-      this.isSearchPanelOpen = false;
-    }
-    event.stopPropagation();
-  }
-
-  handleSearchPanelToggle() {
+  handleSearchPanelToggle(event) {
     this.isSearchPanelOpen = !this.isSearchPanelOpen;
 
     if (this.isSearchPanelOpen) {
@@ -79,7 +70,7 @@ export class SiteSearch {
       const searchPanel = this.el.shadowRoot.querySelectorAll(`.site-search__panel`)[0] as HTMLElement;
       searchPanel.style.top = headerHeight;
     }
-    //event.stopPropagation();
+    event.stopPropagation();
   }
 
   handleSearchPanelClose() {
@@ -101,7 +92,7 @@ export class SiteSearch {
             'is-open--menu': this.isAlternative,
             'is-open': this.isSearchPanelOpen,
           }}
-          onClick={() => this.handleSearchPanelToggle()}
+          onClick={(e) => this.handleSearchPanelToggle(e)}
         >
           {this.showLabel ? <span class={'button--search__label'}>{this._labels['label']}</span> : ''}
           <hy-icon icon={'hy-icon-search'} size={this.size} fill={this.color} />