diff --git a/modules/ps_searchbar/ps_searchbar.tpl b/modules/ps_searchbar/ps_searchbar.tpl index 0111506c7..ddf60991d 100644 --- a/modules/ps_searchbar/ps_searchbar.tpl +++ b/modules/ps_searchbar/ps_searchbar.tpl @@ -27,8 +27,8 @@
- - + +
diff --git a/src/js/constants/selectors-map.ts b/src/js/constants/selectors-map.ts index 74ddc5458..d95babf15 100644 --- a/src/js/constants/selectors-map.ts +++ b/src/js/constants/selectors-map.ts @@ -57,6 +57,7 @@ export const searchBar = { searchResults: '.js-search-results', searchTemplate: '.js-search-template', searchInput: '.js-search-input', + searchIcon: '.js-search-icon', }; export const checkout = { diff --git a/src/js/modules/ps_searchbar.ts b/src/js/modules/ps_searchbar.ts index 18a137f14..d8ec16bdb 100644 --- a/src/js/modules/ps_searchbar.ts +++ b/src/js/modules/ps_searchbar.ts @@ -16,8 +16,23 @@ const initSearchbar = () => { const searchResults = document.querySelector(SearchBarMap.searchResults); const searchTemplate = document.querySelector(SearchBarMap.searchTemplate); const searchInput = document.querySelector(SearchBarMap.searchInput); + const searchIcon = document.querySelector(SearchBarMap.searchIcon); const searchUrl = searchWidget?.dataset.searchControllerUrl; + // focus on the input field when clicking on the widget area + // helps to have a larger "area" for touch devices + searchWidget?.addEventListener('click', () => { + searchInput?.focus(); + }); + + // if input has text then submit search when clicking on the icon + // usability for people without "enter" key + searchIcon?.addEventListener('click', () => { + if (searchInput?.value) { + searchInput?.form?.submit(); + } + }); + searchCanvas?.addEventListener('hidden.bs.offcanvas', () => { if (searchDropdown) { searchDropdown.innerHTML = ''; diff --git a/types/selectors.d.ts b/types/selectors.d.ts index 657c47e7d..448f3813f 100644 --- a/types/selectors.d.ts +++ b/types/selectors.d.ts @@ -57,6 +57,7 @@ declare type searchBar = { searchResults: string, searchTemplate: string, searchInput: string, + searchIcon: string, }; declare type checkout = {