diff --git a/src/components/site-header/site-search/site-search.tsx b/src/components/site-header/site-search/site-search.tsx index fa498d5aa6d9ef8f6e922edec649086b6dbbe18c..230beeb129ce5671fa0d6fc3432efc0fe9edd2aa 100644 --- a/src/components/site-header/site-search/site-search.tsx +++ b/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} />