use id

Author: gabalafou

src/pydata_sphinx_theme/assets/scripts/pydata-sphinx-theme.js

@@ -194,7 +194,7 @@ var findSearchInput = () => {
     } else {
       // must be at least one persistent form, use the first persistent one
       form = document.querySelector(
-        ":not(.search-button__search-container) > form.bd-search",
+        ":not(#pst-search-dialog) > form.bd-search",
       );
     }
     return form.querySelector("input");
@@ -212,9 +212,7 @@ var toggleSearchField = () => {
 
   // if the input field is the hidden one (the one associated with the
   // search button) then toggle the button state (to show/hide the field)
-  const searchDialog = document.querySelector(
-    ".search-button__search-container",
-  );
+  const searchDialog = document.getElementById("pst-search-dialog");
   const hiddenInput = searchDialog.querySelector("input");
   if (input === hiddenInput) {
     if (searchDialog.open) {
@@ -306,9 +304,7 @@ var setupSearchButtons = () => {
   });
 
   // If user clicks outside the search modal dialog, then close it.
-  const searchDialog = document.querySelector(
-    ".search-button__search-container",
-  );
+  const searchDialog = document.getElementById("pst-search-dialog");
   searchDialog.addEventListener("click", (event) => {
     if (!searchDialog.open) {
       return;

src/pydata_sphinx_theme/assets/styles/components/_search.scss

@@ -78,7 +78,7 @@
 /**
  * The search pop-up <dialog>
  */
-.search-button__search-container {
+#pst-search-dialog {
   display: none;
 
   &[open] {

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/layout.html

@@ -63,7 +63,7 @@
           id="pst-secondary-sidebar-checkbox"/>
   <label class="overlay overlay-secondary" for="pst-secondary-sidebar-checkbox"></label>
   {# A search field pop-up that will only show when the search button is clicked #}
-  <dialog class="search-button__search-container">
+  <dialog class="#pst-search-dialog">
     {% include "../components/search-field.html" %}
   </dialog>