diff --git a/src/librustdoc/html/static/js/main.js b/src/librustdoc/html/static/js/main.js
index 47b3fd7a542bc..e957a13a2b038 100644
--- a/src/librustdoc/html/static/js/main.js
+++ b/src/librustdoc/html/static/js/main.js
@@ -245,6 +245,32 @@ function preLoadCss(cssUrl) {
window.searchState = {
rustdocToolbar: document.querySelector("rustdoc-toolbar"),
loadingText: "Loading search results...",
+ searchLoaded: false,
+ loadSearch() {
+ // If you're browsing the nightly docs, the page might need to be refreshed for
+ // the search to work because the hash of the JS scripts might have changed.
+ function sendSearchForm() {
+ // @ts-expect-error
+ document.getElementsByClassName("search-form")[0].submit();
+ }
+ if (!window.searchState.searchLoaded) {
+ window.searchState.searchLoaded = true;
+ window.rr_ = data => {
+ window.searchIndex = data;
+ };
+ if (!window.StringdexOnload) {
+ window.StringdexOnload = [];
+ }
+ window.StringdexOnload.push(() => {
+ loadScript(
+ getVar("static-root-path") + getVar("search-js"),
+ sendSearchForm,
+ );
+ });
+ loadScript(getVar("static-root-path") + getVar("stringdex-js"), sendSearchForm);
+ loadScript(resourcePath("search.index/root", ".js"), sendSearchForm);
+ }
+ },
inputElement: () => {
let el = document.getElementsByClassName("search-input")[0];
if (!el) {
@@ -269,6 +295,10 @@ function preLoadCss(cssUrl) {
`;
out.insertBefore(hdr, window.searchState.outputElement());
el = document.getElementsByClassName("search-input")[0];
+
+ el.addEventListener("focus", () => {
+ window.searchState.loadSearch();
+ });
}
if (el instanceof HTMLInputElement) {
return el;
@@ -391,41 +421,6 @@ function preLoadCss(cssUrl) {
return params;
},
setup: () => {
- let searchLoaded = false;
- const search_input = window.searchState.inputElement();
- if (!search_input) {
- return;
- }
- // If you're browsing the nightly docs, the page might need to be refreshed for the
- // search to work because the hash of the JS scripts might have changed.
- function sendSearchForm() {
- // @ts-expect-error
- document.getElementsByClassName("search-form")[0].submit();
- }
- function loadSearch() {
- if (!searchLoaded) {
- searchLoaded = true;
- window.rr_ = data => {
- window.searchIndex = data;
- };
- if (!window.StringdexOnload) {
- window.StringdexOnload = [];
- }
- window.StringdexOnload.push(() => {
- loadScript(
- getVar("static-root-path") + getVar("search-js"),
- sendSearchForm,
- );
- });
- loadScript(getVar("static-root-path") + getVar("stringdex-js"), sendSearchForm);
- loadScript(resourcePath("search.index/root", ".js"), sendSearchForm);
- }
- }
-
- search_input.addEventListener("focus", () => {
- loadSearch();
- });
-
const btn = document.getElementById("search-button");
if (btn) {
btn.onclick = event => {
@@ -434,7 +429,7 @@ function preLoadCss(cssUrl) {
}
event.preventDefault();
window.searchState.toggle();
- loadSearch();
+ window.searchState.loadSearch();
};
}
@@ -455,7 +450,7 @@ function preLoadCss(cssUrl) {
// previous state with nothing in the bar.
const inputElement = window.searchState.inputElement();
if (params.search !== undefined && inputElement !== null) {
- loadSearch();
+ window.searchState.loadSearch();
inputElement.value = params.search;
// Some browsers fire "onpopstate" for every page load
// (Chrome), while others fire the event only when actually
@@ -482,29 +477,32 @@ function preLoadCss(cssUrl) {
// that try to sync state between the URL and the search input. To work around it,
// do a small amount of re-init on page show.
window.onpageshow = () => {
- const inputElement = window.searchState.inputElement();
const qSearch = window.searchState.getQueryStringParams().search;
- if (qSearch !== undefined && inputElement !== null) {
- if (inputElement.value === "") {
- inputElement.value = qSearch;
- }
- window.searchState.showResults();
- if (qSearch === "") {
- loadSearch();
- window.searchState.focus();
+ if (qSearch !== undefined) {
+ const inputElement = window.searchState.inputElement();
+ if (inputElement !== null) {
+ if (inputElement.value === "") {
+ inputElement.value = qSearch;
+ }
+ window.searchState.showResults();
+ if (qSearch === "") {
+ window.searchState.loadSearch();
+ window.searchState.focus();
+ }
}
- } else {
- window.searchState.hideResults();
}
};
const params = window.searchState.getQueryStringParams();
if (params.search !== undefined) {
window.searchState.setLoadingSearch();
- loadSearch();
+ window.searchState.loadSearch();
}
},
setLoadingSearch: () => {
+ // We set up the search input before adding the other search elements (like
+ // "search loading") in case it's not already there yet.
+ window.searchState.inputElement();
const search = window.searchState.outputElement();
nonnull(search).innerHTML = "" +
window.searchState.loadingText + "
";
diff --git a/src/librustdoc/html/static/js/rustdoc.d.ts b/src/librustdoc/html/static/js/rustdoc.d.ts
index 230ae4f70e912..9bd6a1a587e5d 100644
--- a/src/librustdoc/html/static/js/rustdoc.d.ts
+++ b/src/librustdoc/html/static/js/rustdoc.d.ts
@@ -137,6 +137,8 @@ declare namespace rustdoc {
loadDesc: function({descShard: SearchDescShard, descIndex: number}): Promise;
loadedDescShard: function(string, number, string);
isDisplayed: function(): boolean;
+ searchLoaded: boolean;
+ loadSearch: function();
}
interface SearchDescShard {
diff --git a/tests/rustdoc-gui/go-to-collapsed-elem.goml b/tests/rustdoc-gui/go-to-collapsed-elem.goml
index e56e7ba08cd81..ff85f37047e92 100644
--- a/tests/rustdoc-gui/go-to-collapsed-elem.goml
+++ b/tests/rustdoc-gui/go-to-collapsed-elem.goml
@@ -1,6 +1,7 @@
// This test ensures that when clicking on a link which leads to an item inside a collapsed element,
// the collapsed element will be expanded.
go-to: "file://" + |DOC_PATH| + "/test_docs/struct.Foo.html"
+include: "utils.goml"
// We check that the implementors block is expanded.
assert-property: ("#implementations-list .implementors-toggle", {"open": "true"})
// We now collapse the implementors block.
@@ -16,6 +17,7 @@ define-function: ("collapsed-from-search", [], block {
// Then we collapse the section again...
set-property: ("#implementations-list .implementors-toggle", {"open": "false"})
// Then we run the search.
+ call-function: ("open-search", {})
write-into: (".search-input", "foo::must_use")
wait-for: "//*[@id='search']//a[@href='../test_docs/struct.Foo.html#method.must_use']"
click: "//*[@id='search']//a[@href='../test_docs/struct.Foo.html#method.must_use']"
diff --git a/tests/rustdoc-gui/search-elements.goml b/tests/rustdoc-gui/search-elements.goml
new file mode 100644
index 0000000000000..a06421c9a6598
--- /dev/null
+++ b/tests/rustdoc-gui/search-elements.goml
@@ -0,0 +1,15 @@
+// This test ensures that the search elements are not created in the DOM before being needed.
+
+go-to: "file://" + |DOC_PATH| + "/test_docs/index.html"
+store-value: (search_selector, "#search")
+
+// This selector is not supposed to exist yet.
+assert-false: |search_selector|
+
+// It should be generated when the search "begins".
+click: "#search-button"
+wait-for: |search_selector|
+
+// When we arrive on a page with a search query parameter, the element should also be present.
+go-to: "file://" + |DOC_PATH| + "/test_docs/index.html?search=a"
+wait-for: |search_selector|
diff --git a/tests/rustdoc-gui/sidebar-source-code-display.goml b/tests/rustdoc-gui/sidebar-source-code-display.goml
index d2b667b498bc6..4394204900117 100644
--- a/tests/rustdoc-gui/sidebar-source-code-display.goml
+++ b/tests/rustdoc-gui/sidebar-source-code-display.goml
@@ -53,7 +53,8 @@ define-function: (
"#src-sidebar details[open] > .files a:not(.selected):focus",
{"color": |color_hover|, "background-color": |background_hover|},
)
- focus: ".search-input"
+ // Focus another element to remove focus from the element.
+ focus: "#search-button"
// With hover.
move-cursor-to: "#src-sidebar details[open] > .files a:not(.selected)"
assert-css: (
@@ -72,7 +73,8 @@ define-function: (
"#src-sidebar .dir-entry summary:focus",
{"color": |color_hover|, "background-color": |background_hover|},
)
- focus: ".search-input"
+ // Focus another element to remove focus from the element.
+ focus: "#search-button"
// With hover.
move-cursor-to: "#src-sidebar .dir-entry summary"
assert-css: (
@@ -91,7 +93,8 @@ define-function: (
"#src-sidebar details[open] > .folders > details > summary:focus",
{"color": |color_hover|, "background-color": |background_hover|},
)
- focus: ".search-input"
+ // Focus another element to remove focus from the element.
+ focus: "#search-button"
// With hover.
move-cursor-to: "#src-sidebar details[open] > .folders > details > summary"
assert-css: (