From 7d68b3209b5499fa9538e0f412bace5674a26026 Mon Sep 17 00:00:00 2001
From: Oliver Walters <oliver.henry.walters@gmail.com>
Date: Mon, 28 Mar 2022 10:18:49 +1100
Subject: [PATCH] Add callbacks for search panel opening and closing

---
 .../static/script/inventree/inventree.js      |  5 ++++
 InvenTree/templates/js/translated/search.js   | 26 +++++++++++++++++++
 InvenTree/templates/search.html               |  4 +--
 3 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/InvenTree/InvenTree/static/script/inventree/inventree.js b/InvenTree/InvenTree/static/script/inventree/inventree.js
index c71231ec87..b7cacd5860 100644
--- a/InvenTree/InvenTree/static/script/inventree/inventree.js
+++ b/InvenTree/InvenTree/static/script/inventree/inventree.js
@@ -231,6 +231,11 @@ function inventreeDocReady() {
         stopNotificationWatcher();
     });
 
+    // Calbacks for search panel
+    $('#offcanvas-search').on('show.bs.offcanvas', openSearchPanel);
+    $('#offcanvas-search').on('hidden.bs.offcanvas', closeSearchPanel);
+
+    // Callbacks for notifications panel
     $('#offcanvas-notification').on('show.bs.offcanvas', openNotificationPanel);  // listener for opening the notification panel
     $('#offcanvas-notification').on('hidden.bs.offcanvas', closeNotificationPanel);  // listener for closing the notification panel
 }
diff --git a/InvenTree/templates/js/translated/search.js b/InvenTree/templates/js/translated/search.js
index 35a26963c3..b9121a2fea 100644
--- a/InvenTree/templates/js/translated/search.js
+++ b/InvenTree/templates/js/translated/search.js
@@ -4,5 +4,31 @@
 */
 
 /* exported
+    closeSearchPanel,
+    openSearchPanel,
 */
 
+
+function closeSearchPanel() {
+
+    // TODO
+    
+}
+
+
+/*
+ * Callback when the search panel is opened.
+ * Ensure the panel is in a known state
+ */
+function openSearchPanel() {
+
+    var panel = $('#offcanvas-search');
+
+    // Ensure the 'no results found' element is visible
+    panel.find('#search-no-results').show();
+
+    // Finally, grab keyboard focus in the search bar
+    panel.find('#search-input').focus();
+
+}
+
diff --git a/InvenTree/templates/search.html b/InvenTree/templates/search.html
index be6c9ca773..1780abbdee 100644
--- a/InvenTree/templates/search.html
+++ b/InvenTree/templates/search.html
@@ -3,7 +3,7 @@
 <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvas-search" data-bs-scroll="true" aria-labelledby="offcanvas-search-label">
     <div class="offcanvas-header">
       <div class='input-group'>
-        <input type="text" name='search' class="form-control" aria-label='{% trans "Search" %}' id="search-bar" placeholder="{% trans 'Search' %}"{% if query_text %} value="{{ query }}"{% endif %}>
+        <input type="text" name='search-input' class="form-control" aria-label='{% trans "Search" %}' id="search-input" placeholder="{% trans 'Search' %}"{% if query_text %} value="{{ query }}"{% endif %}>
         <button type="submit" id='search-submit' class="btn btn-secondary" title='{% trans "Search" %}'>
             <span class='fas fa-search'></span>
         </button>
@@ -12,7 +12,7 @@
     </div>
     <div class="offcanvas-body">
       <div id="search-center">
-        <p id='serach-no-results' class='text-muted'>
+        <p id='search-no-results' class='text-muted'>
           <em>{% trans "No search results" %}</em>
         </p>
       </div>