Fix search controls and query clear state

static/app.js

@@ -258,11 +258,11 @@ function resetPositionControlScroll() {
   positionControlScroll = { key: getSearchViewKey(), last: getResultScrollTop(), distance: 0, until: 0 };
 }
 
-function prepareReturnPosition(key) {
+function prepareReturnPosition(key, updateControls = true) {
   resetPositionControlScroll();
   const saved = searchPositions.get(key);
   setReturnPositionTarget(validSearchPosition(saved) && (saved.index > 0 || saved.offset > 0) ? saved : null);
-  updateSearchPositionControls();
+  if (updateControls) updateSearchPositionControls();
 }
 
 function updateSearchPositionControls() {
@@ -291,7 +291,7 @@ function prepareSearchPositionNavigation({ fromStart, restorePosition }) {
   const key = getSearchViewKey();
   if (fromStart) saveSearchPosition();
   cancelPositionRestore();
-  prepareReturnPosition(key);
+  prepareReturnPosition(key, !fromStart);
   if (!restorePosition) return false;
   setReturnPositionTarget();
   return restoreSearchViewSnapshot(key);
@@ -1605,6 +1605,7 @@ const DOM = {};
 function cacheDOM() {
   DOM.headerTitle = $("#header-title");
   DOM.headerLogo = $("#header-logo");
+  DOM.searchBox = $("#search-box");
   DOM.searchInput = $("#search-input");
   DOM.hamburgerBtn = $("#hamburger-btn");
   DOM.settingsBtn = $("#settings-btn");
@@ -1677,6 +1678,19 @@ function cacheDOM() {
   DOM.multiDeselect = $("#multi-deselect");
 }
 
+function syncSearchInputState() {
+  if (!DOM.searchInput) return;
+  const hasQuery = !!DOM.searchInput.value.trim();
+  DOM.searchInput.dataset.hasQuery = hasQuery ? "true" : "false";
+  DOM.searchBox?.classList.toggle("has-query", hasQuery);
+}
+
+function setSearchInputValue(value) {
+  if (!DOM.searchInput) return;
+  DOM.searchInput.value = value || "";
+  syncSearchInputState();
+}
+
 const HTML_ESCAPE_MAP = { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" };
 
 function escapeHTML(str) {
@@ -2570,7 +2584,7 @@ function syncStateToURL(replace = true) {
 function syncURLToState() {
   const params = new URLSearchParams(window.location.search);
   STATE.query = params.get("q") || "";
-  DOM.searchInput.value = STATE.query;
+  setSearchInputValue(STATE.query);
   STATE.filterRepos = params.getAll("repo").map(r => `VoiceOfML/${r}`);
   STATE.browserPath = params.get("path") || "";
   const sort = params.get("sort") || "relevance";
@@ -2818,7 +2832,7 @@ function createSidebarBreadcrumb(path) {
 function submitSearchQuery(query, { restore = false, record = false, refreshHistory = false, clearResults = false, blur = false, updateInput = restore } = {}) {
   cancelPendingSearchControls();
   saveSearchViewSnapshot();
-  if (updateInput) DOM.searchInput.value = query;
+  if (updateInput) setSearchInputValue(query);
   STATE.query = query;
   STATE.page = 1;
   if (clearResults) { STATE.results = []; keyboardResultIndex = -1; }
@@ -4826,6 +4840,7 @@ function setupResultDelegation() {
 
 async function init() {
   cacheDOM();
+  syncSearchInputState();
   await initSearchPositions();
   setupSearchPositionControls();
   setupSearchPositionSaving();
@@ -4839,7 +4854,10 @@ async function init() {
   else if (savedMobile === "desktop") STATE.isMobile = false;
   else STATE.isMobile = autoDetectMobile();
   applyMobileMode();
-  DOM.searchInput.addEventListener("input", debouncedSearch);
+  DOM.searchInput.addEventListener("input", () => {
+    syncSearchInputState();
+    debouncedSearch();
+  });
   DOM.searchInput.addEventListener("compositionstart", () => {
     searchComposing = true;
   });

static/style.css

@@ -288,8 +288,9 @@ body.light .header-logo-icon-light {
   min-width: 0;
 }
 
-/* Override the browser's inline hiding when the search field is empty. */
-.search-input::-webkit-search-cancel-button { opacity: 1 !important; pointer-events: auto !important; cursor: pointer; }
+/* Keep the native clear control available only for a non-empty query. */
+.search-input::-webkit-search-cancel-button { opacity: 0 !important; pointer-events: none !important; cursor: default; }
+.search-box.has-query .search-input::-webkit-search-cancel-button { opacity: 1 !important; pointer-events: auto !important; cursor: pointer; }
 
 .search-input::placeholder {
   color: var(--on-surface-variant);

tests/test_browser.py

@@ -98,6 +98,22 @@ class BrowserInteractionTests(unittest.TestCase):
         finally:
             context.close()
 
+    def test_search_clear_control_tracks_query_state(self):
+        context, page, errors = self.open_page()
+        try:
+            search = page.locator("#search-input")
+            self.assertEqual(search.get_attribute("data-has-query"), "false")
+            self.assertFalse(page.locator("#search-box").evaluate("el => el.classList.contains('has-query')"))
+            search.fill("手机")
+            page.wait_for_function("document.getElementById('search-input').dataset.hasQuery === 'true'")
+            self.assertTrue(page.locator("#search-box").evaluate("el => el.classList.contains('has-query')"))
+            search.fill("")
+            page.wait_for_function("document.getElementById('search-input').dataset.hasQuery === 'false'")
+            self.assertFalse(page.locator("#search-box").evaluate("el => el.classList.contains('has-query')"))
+            self.assertEqual(errors, [])
+        finally:
+            context.close()
+
     def test_malformed_api_envelopes_and_folder_errors_are_rejected(self):
         context, page, errors = self.open_page()
         try:

tests/test_position_controls.py

@@ -214,6 +214,29 @@ class PositionControlTests(unittest.TestCase):
             if width < 460:
                 self.assertTrue(self.page.locator('#restart-position-btn').evaluate('e=>e.getBoundingClientRect().right<=document.querySelector(".result-position-count").getBoundingClientRect().left'))
 
+    def test_back_to_top_does_not_flash_beside_return_button(self):
+        self.jump(51)
+        self.wait_position(50)
+        self.page.evaluate('''()=>{
+          window.positionButtonStates=[];
+          const capture=()=>positionButtonStates.push({
+            top:DOM.backToTopBtn.hidden,
+            returnButton:DOM.returnToPositionBtn.hidden,
+          });
+          window.positionButtonObserver=new MutationObserver(capture);
+          for(const button of [DOM.backToTopBtn,DOM.returnToPositionBtn])
+            positionButtonObserver.observe(button,{attributes:true,attributeFilter:['hidden']});
+          capture();
+        }''')
+        self.page.locator('#restart-position-btn').click()
+        self.wait_position(0)
+        self.page.wait_for_timeout(50)
+        states = self.page.evaluate('''()=>{
+          positionButtonObserver.disconnect();
+          return positionButtonStates;
+        }''')
+        self.assertFalse(any(not state['top'] and not state['returnButton'] for state in states))
+
     def test_start_over_after_cached_reload_stays_and_goes_to_top(self):
         self.jump(95001)
         self.wait_position(95000)

tests/test_static_contract.py

@@ -62,6 +62,12 @@ class StaticFrontendContractTests(unittest.TestCase):
             self.assertIn(value, self.js)
         self.assertIn("DOMContentLoaded", self.js)
 
+    def test_search_clear_control_follows_query_state(self):
+        self.assertIn("function syncSearchInputState()", self.js)
+        self.assertIn('DOM.searchBox?.classList.toggle("has-query", hasQuery)', self.js)
+        self.assertIn(".search-input::-webkit-search-cancel-button { opacity: 0 !important; pointer-events: none !important;", self.css)
+        self.assertIn(".search-box.has-query .search-input::-webkit-search-cancel-button { opacity: 1 !important; pointer-events: auto !important;", self.css)
+
     def test_desktop_random_actions_match_labels_and_empty_state_behavior(self):
         self.assertIn('id="random-book-btn" class="random-txt-btn" title="随机下本书"', self.html)
         self.assertIn('id="random-txt-btn" class="random-book-btn" title="随机来本书"', self.html)