From c08fd4c57ab6eb75a6f304876001330032e47191 Mon Sep 17 00:00:00 2001
From: Tatu Wikman <tsw@vilkas.fi>
Date: Wed, 20 Dec 2023 17:53:13 +0200
Subject: [PATCH] Usability improvements for search widget

---
 modules/ps_searchbar/ps_searchbar.tpl |  4 ++--
 src/js/constants/selectors-map.ts     |  1 +
 src/js/modules/ps_searchbar.ts        | 15 +++++++++++++++
 types/selectors.d.ts                  |  1 +
 4 files changed, 19 insertions(+), 2 deletions(-)

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 @@
   <div id="search_widget" class="search-widgets js-search-widget" data-search-controller-url="{$search_controller_url}">
     <form method="get" action="{$search_controller_url}">
       <input type="hidden" name="controller" value="search">
-      <i class="material-icons search" aria-hidden="true">search</i>
-      <input class="js-search-input" type="text" name="s" value="{$search_string}" placeholder="{l s='Search our catalog' d='Shop.Theme.Catalog'}" aria-label="{l s='Search' d='Shop.Theme.Catalog'}">
+      <i class="material-icons search js-search-icon" aria-hidden="true">search</i>
+      <input class="js-search-input" type="search" name="s" value="{$search_string}" placeholder="{l s='Search our catalog' d='Shop.Theme.Catalog'}" aria-label="{l s='Search' d='Shop.Theme.Catalog'}">
       <i class="material-icons clear" aria-hidden="true">clear</i>
     </form>
 
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..0259a6cfa 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<HTMLElement>(SearchBarMap.searchResults);
   const searchTemplate = document.querySelector<HTMLTemplateElement>(SearchBarMap.searchTemplate);
   const searchInput = document.querySelector<HTMLInputElement>(SearchBarMap.searchInput);
+  const searchIcon = document.querySelector<HTMLElement>(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 = {