Usability issue with search on main page apache#412

theme/apache/templates/base.html

@@ -32,25 +32,38 @@
   <link href="/css/styles.css" rel="stylesheet">
   <link href="/css/new-ui.css" rel="stylesheet">
   <script src="https://www.apachecon.com/event-images/snippet.js"></script>
-  <style>
+
     {% include "styles.css" %}
-  </style>
-
+
   <!-- pagefind search -->
-  <link href="/_pagefind/pagefind-ui.css" rel="stylesheet">
+  <link href="/_pagefind/pagefind-ui.css" rel="stylesheet"> 
   <script src="/_pagefind/pagefind-ui.js" type="text/javascript"></script>
+
   <script>
     window.addEventListener('DOMContentLoaded', (event) => {
-        new PagefindUI({ element: "#pagefind-search" });
-    });
-    var pageTitle = '{{ page.title }}';
-    if(pageTitle === '404'){
-      window.addEventListener('DOMContentLoaded', (event) => {
-          new PagefindUI({ element: "#page-404-search" });
+      // Initialize the Pagefind UI for the main search
+      new PagefindUI({ element: "#pagefind-search" });
+
+      // Get the search button and input field
+      const searchButton = document.querySelector('.dropdown-toggle'); //  class of the button
+      const searchInput = document.querySelector('#pagefind-search input'); // The input field for Pagefind search
+
+      // Add click event to focus on the input when the button is clicked
+      searchButton.addEventListener('click', () => {
+        searchInput.focus(); // Focus on the input field when the button is clicked
       });
-    }
+
+      // Check if the page is a 404 and initialize the search UI for the 404 page
+      const pageTitle = '{{ page.title }}'; // Assuming this is a template engine placeholder
+      if (pageTitle === '404') {
+        // Initialize the Pagefind UI for the 404 page
+        new PagefindUI({ element: "#page-404-search" });
+      }
+    });
   </script>
 
+
+
 
   {% if page.notice %}<!-- {{ page.notice }} -->{% endif %}
   {% if page.license %}<!-- {{ page.license }} -->{% endif %}