Fixes search window does not appear

CHANGELOG.md

@@ -20,8 +20,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
-* Fix search filter toggle button styling in the HTML output. ([#2406], [#2408])
+* Fix the search filter toggle button styling in the HTML output. ([#2406], [#2408])
 * The theme selector for the HTML output now correctly picks `Automatic (OS)` if the user hasn't explicitly set the theme. ([#2414], [#2438])
+* Fix the search window sometimes not appearing in the HTML output. ([#2430], [#2458])
 
 ## Version [v1.2.1] - 2023-12-02
 
@@ -1795,7 +1796,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 [#2408]: https://github.com/JuliaDocs/Documenter.jl/issues/2408
 [#2414]: https://github.com/JuliaDocs/Documenter.jl/issues/2414
 [#2415]: https://github.com/JuliaDocs/Documenter.jl/issues/2415
+[#2430]: https://github.com/JuliaDocs/Documenter.jl/issues/2430
 [#2438]: https://github.com/JuliaDocs/Documenter.jl/issues/2438
+[#2458]: https://github.com/JuliaDocs/Documenter.jl/issues/2458
 [JuliaLang/julia#36953]: https://github.com/JuliaLang/julia/issues/36953
 [JuliaLang/julia#38054]: https://github.com/JuliaLang/julia/issues/38054
 [JuliaLang/julia#39841]: https://github.com/JuliaLang/julia/issues/39841

assets/html/js/shortcut.js

@@ -1,100 +1,104 @@
 // libraries: jquery
 // arguments: $
 
-let search_modal_header = `
-  <header class="modal-card-head gap-2 is-align-items-center is-justify-content-space-between w-100 px-3">
-    <div class="field mb-0 w-100">
-      <p class="control has-icons-right">
-        <input class="input documenter-search-input" type="text" placeholder="Search" />
-        <span class="icon is-small is-right has-text-primary-dark">
-          <i class="fas fa-magnifying-glass"></i>
-        </span>
-      </p>
-    </div>
-    <div class="icon is-size-4 is-clickable close-search-modal">
-      <i class="fas fa-times"></i>
-    </div>
-  </header>
-`;
-
-let initial_search_body = `
-  <div class="has-text-centered my-5 py-5">Type something to get started!</div>
-`;
-
-let search_modal_footer = `
-  <footer class="modal-card-foot">
-    <span>
-      <kbd class="search-modal-key-hints">Ctrl</kbd> +
-      <kbd class="search-modal-key-hints">/</kbd> to search
-    </span>
-    <span class="ml-3"> <kbd class="search-modal-key-hints">esc</kbd> to close </span>
-  </footer>
-`;
-
-$(document.body).append(
-  `
-    <div class="modal" id="search-modal">
-      <div class="modal-background"></div>
-      <div class="modal-card search-min-width-50 search-min-height-100 is-justify-content-center">
-        ${search_modal_header}
-        <section class="modal-card-body is-flex is-flex-direction-column is-justify-content-center gap-4 search-modal-card-body">
-          ${initial_search_body}
-        </section>
-        ${search_modal_footer}
+$(document).ready(function () {
+  let search_modal_header = `
+    <header class="modal-card-head gap-2 is-align-items-center is-justify-content-space-between w-100 px-3">
+      <div class="field mb-0 w-100">
+        <p class="control has-icons-right">
+          <input class="input documenter-search-input" type="text" placeholder="Search" />
+          <span class="icon is-small is-right has-text-primary-dark">
+            <i class="fas fa-magnifying-glass"></i>
+          </span>
+        </p>
       </div>
-    </div>
-  `
-);
+      <div class="icon is-size-4 is-clickable close-search-modal">
+        <i class="fas fa-times"></i>
+      </div>
+    </header>
+  `;
 
-document.querySelector(".docs-search-query").addEventListener("click", () => {
-  openModal();
-});
+  let initial_search_body = `
+    <div class="has-text-centered my-5 py-5">Type something to get started!</div>
+  `;
 
-document.querySelector(".close-search-modal").addEventListener("click", () => {
-  closeModal();
-});
+  let search_modal_footer = `
+    <footer class="modal-card-foot">
+      <span>
+        <kbd class="search-modal-key-hints">Ctrl</kbd> +
+        <kbd class="search-modal-key-hints">/</kbd> to search
+      </span>
+      <span class="ml-3"> <kbd class="search-modal-key-hints">esc</kbd> to close </span>
+    </footer>
+  `;
 
-$(document).on("click", ".search-result-link", function () {
-  closeModal();
-});
+  $(document.body).append(
+    `
+      <div class="modal" id="search-modal">
+        <div class="modal-background"></div>
+        <div class="modal-card search-min-width-50 search-min-height-100 is-justify-content-center">
+          ${search_modal_header}
+          <section class="modal-card-body is-flex is-flex-direction-column is-justify-content-center gap-4 search-modal-card-body">
+            ${initial_search_body}
+          </section>
+          ${search_modal_footer}
+        </div>
+      </div>
+    `
+  );
 
-document.addEventListener("keydown", (event) => {
-  if ((event.ctrlKey || event.metaKey) && event.key === "/") {
+  document.querySelector(".docs-search-query").addEventListener("click", () => {
     openModal();
-  } else if (event.key === "Escape") {
-    closeModal();
-  }
+  });
 
-  return false;
-});
+  document
+    .querySelector(".close-search-modal")
+    .addEventListener("click", () => {
+      closeModal();
+    });
 
-// Functions to open and close a modal
-function openModal() {
-  let searchModal = document.querySelector("#search-modal");
+  $(document).on("click", ".search-result-link", function () {
+    closeModal();
+  });
 
-  searchModal.classList.add("is-active");
-  document.querySelector(".documenter-search-input").focus();
-}
+  document.addEventListener("keydown", (event) => {
+    if ((event.ctrlKey || event.metaKey) && event.key === "/") {
+      openModal();
+    } else if (event.key === "Escape") {
+      closeModal();
+    }
 
-function closeModal() {
-  let searchModal = document.querySelector("#search-modal");
-  let initial_search_body = `
-    <div class="has-text-centered my-5 py-5">Type something to get started!</div>
-  `;
+    return false;
+  });
 
-  searchModal.classList.remove("is-active");
-  document.querySelector(".documenter-search-input").blur();
+  // Functions to open and close a modal
+  function openModal() {
+    let searchModal = document.querySelector("#search-modal");
 
-  if (!$(".search-modal-card-body").hasClass("is-justify-content-center")) {
-    $(".search-modal-card-body").addClass("is-justify-content-center");
+    searchModal.classList.add("is-active");
+    document.querySelector(".documenter-search-input").focus();
   }
 
-  $(".documenter-search-input").val("");
-  $(".search-modal-card-body").html(initial_search_body);
-}
+  function closeModal() {
+    let searchModal = document.querySelector("#search-modal");
+    let initial_search_body = `
+      <div class="has-text-centered my-5 py-5">Type something to get started!</div>
+    `;
 
-document
-  .querySelector("#search-modal .modal-background")
-  .addEventListener("click", () => {
-    closeModal();
-  });
+    searchModal.classList.remove("is-active");
+    document.querySelector(".documenter-search-input").blur();
+
+    if (!$(".search-modal-card-body").hasClass("is-justify-content-center")) {
+      $(".search-modal-card-body").addClass("is-justify-content-center");
+    }
+
+    $(".documenter-search-input").val("");
+    $(".search-modal-card-body").html(initial_search_body);
+  }
+
+  document
+    .querySelector("#search-modal .modal-background")
+    .addEventListener("click", () => {
+      closeModal();
+    });
+});