Fix responsive search not at top of page

fixed #7117

Author: dragonstyle

news/changelog-1.4.md

@@ -116,6 +116,7 @@
 
 - ([#7105](https://github.com/quarto-dev/quarto-cli/issues/7105)): Improve search results by raising default limit and fixing and removing warning that would appear for Algolia when limit was more than 20.
 - ([#7150](https://github.com/quarto-dev/quarto-cli/issues/7150)): Search keyboard shortcut will not intercept keys directed at inputs.
+- ([#7117](https://github.com/quarto-dev/quarto-cli/issues/7117)): Ensure that search works properly in mobile layouts when not scrolled to top of page (don't close search when scroll occurs because of keyboard being shown).
 
 ## Books
 

src/resources/projects/website/search/quarto-search.js

@@ -409,11 +409,30 @@ window.document.addEventListener("DOMContentLoaded", function (_event) {
     }
   }
 
+  function throttle(func, wait) {
+    let waiting = false;
+    return function () {
+      if (!waiting) {
+        func.apply(this, arguments);
+        waiting = true;
+        setTimeout(function () {
+          waiting = false;
+        }, wait);
+      }
+    };
+  }
+
   // If the main document scrolls dismiss the search results
   // (otherwise, since they're floating in the document they can scroll with the document)
-  window.document.body.onscroll = () => {
-    setIsOpen(false);
-  };
+  window.document.body.onscroll = throttle(() => {
+    // Only do this if we're not detached
+    // Bug #7117
+    // This will happen when the keyboard is shown on ios (resulting in a scroll)
+    // which then closed the search UI
+    if (!window.matchMedia(detachedMediaQuery).matches) {
+      setIsOpen(false);
+    }
+  }, 50);
 
   if (showSearchResults) {
     setIsOpen(true);