Add callbacks for search panel opening and closing

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
 }

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();
+
+}
+

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>