diff --git a/packages/basehub/src/react/search/primitive.tsx b/packages/basehub/src/react/search/primitive.tsx
index 10af553..97072dc 100644
--- a/packages/basehub/src/react/search/primitive.tsx
+++ b/packages/basehub/src/react/search/primitive.tsx
@@ -520,62 +520,93 @@ const Root = <
  * Input
  * -----------------------------------------------------------------------------------------------*/
 
+const useIsoLayoutEffect =
+  typeof window === "undefined" ? React.useEffect : React.useLayoutEffect;
+
 const Input = React.forwardRef<
   HTMLInputElement,
-  Omit<JSX.IntrinsicElements["input"] & { asChild?: boolean }, "ref">
->(({ asChild, onChange, onKeyDown, ...props }, ref) => {
-  const { id, query, onQueryChange, onIndexChange, recentSearches, result } =
-    useContext();
-  const Comp = asChild ? Slot : "input";
+  Omit<
+    JSX.IntrinsicElements["input"] & {
+      asChild?: boolean;
+      disableSelectionPrefill?: boolean;
+    },
+    "ref"
+  >
+>(
+  (
+    { asChild, onChange, onKeyDown, disableSelectionPrefill, ...props },
+    ref
+  ) => {
+    const { id, query, onQueryChange, onIndexChange, recentSearches, result } =
+      useContext();
+    const Comp = asChild ? Slot : "input";
 
-  return (
-    <Comp
-      {...props}
-      value={query}
-      onChange={(e) => {
-        onChange?.(e as React.ChangeEvent<HTMLInputElement>);
-        if (e.target instanceof HTMLInputElement) {
-          onQueryChange(e.target.value);
-        }
-      }}
-      onKeyDown={(e) => {
-        onKeyDown?.(e as React.KeyboardEvent<HTMLInputElement>);
-        // handle arrow keys and enter
-        if (e.key === "ArrowDown") {
-          e.preventDefault();
-          onIndexChange({ type: "incr", scrollIntoView: true });
-        } else if (e.key === "ArrowUp") {
-          e.preventDefault();
-          onIndexChange({ type: "decr", scrollIntoView: true });
-        } else if (e.key === "Enter") {
-          e.preventDefault();
-          const selectedNode = document.querySelector<HTMLElement>(
-            `[data-basehub-hit-for="${id}"], [data-selected="true"]`
-          );
-          if (selectedNode) {
-            const href = selectedNode.getAttribute("href");
-            if (href) {
-              if (e.metaKey) {
-                window.open(href, "_blank");
-              } else {
-                window.location.href = href;
-              }
-              if (recentSearches) {
-                const hit = result?.hits.find(
-                  (h) => h._key === selectedNode.dataset.basehubHitKey
-                );
-                if (hit) {
-                  recentSearches.add(hit);
+    const onQueryChangeRef = React.useRef(onQueryChange);
+    onQueryChangeRef.current = onQueryChange;
+
+    const queryRef = React.useRef(query);
+    queryRef.current = query;
+
+    useIsoLayoutEffect(() => {
+      if (!onQueryChangeRef.current) return;
+      const defaultQuery = disableSelectionPrefill
+        ? ""
+        : window.getSelection()?.toString() || "";
+
+      if (queryRef.current === defaultQuery) return;
+
+      onQueryChangeRef.current(defaultQuery);
+    }, [disableSelectionPrefill]);
+
+    return (
+      <Comp
+        {...props}
+        value={query}
+        onChange={(e) => {
+          onChange?.(e as React.ChangeEvent<HTMLInputElement>);
+          if (e.target instanceof HTMLInputElement) {
+            onQueryChange(e.target.value);
+          }
+        }}
+        onKeyDown={(e) => {
+          onKeyDown?.(e as React.KeyboardEvent<HTMLInputElement>);
+          // handle arrow keys and enter
+          if (e.key === "ArrowDown") {
+            e.preventDefault();
+            onIndexChange({ type: "incr", scrollIntoView: true });
+          } else if (e.key === "ArrowUp") {
+            e.preventDefault();
+            onIndexChange({ type: "decr", scrollIntoView: true });
+          } else if (e.key === "Enter") {
+            e.preventDefault();
+            const selectedNode = document.querySelector<HTMLElement>(
+              `[data-basehub-hit-for="${id}"], [data-selected="true"]`
+            );
+            if (selectedNode) {
+              const href = selectedNode.getAttribute("href");
+              if (href) {
+                if (e.metaKey) {
+                  window.open(href, "_blank");
+                } else {
+                  window.location.href = href;
+                }
+                if (recentSearches) {
+                  const hit = result?.hits.find(
+                    (h) => h._key === selectedNode.dataset.basehubHitKey
+                  );
+                  if (hit) {
+                    recentSearches.add(hit);
+                  }
                 }
               }
             }
           }
-        }
-      }}
-      ref={ref}
-    />
-  );
-});
+        }}
+        ref={ref}
+      />
+    );
+  }
+);
 
 /* -------------------------------------------------------------------------------------------------
  * Placeholder
diff --git a/playground/src/app/search/index.tsx b/playground/src/app/search/index.tsx
index a6935d5..476045d 100644
--- a/playground/src/app/search/index.tsx
+++ b/playground/src/app/search/index.tsx
@@ -4,10 +4,10 @@ import { SearchBox, useSearch } from "../../../.basehub/react-search";
 import s from "./search.module.css";
 
 export const Search = () => {
-  const [count, setCount] = useState(0);
+  const [open, setOpen] = useState(false);
 
   const search = useSearch<{ some: "thing" }>({
-    _searchKey: "somet",
+    _searchKey: null,
     queryBy: ["_title", "content"],
     saveRecentSearches: {
       getStorage: () => window.localStorage,
@@ -19,22 +19,54 @@ export const Search = () => {
     <>
       <button
         onClick={() => {
-          setCount(count + 1);
+          setOpen((p) => !p);
         }}
       >
-        Counter {count}
+        TOGGLE
       </button>
       <br />
-      <SearchBox.Root search={search}>
-        <SearchBox.Input />
-        <SearchBox.Placeholder asChild>
+      {open && (
+        <SearchBox.Root search={search}>
+          <SearchBox.Input autoFocus />
+          <SearchBox.Placeholder asChild>
+            <SearchBox.HitsList asChild>
+              <ul>
+                <h3>Recent Searches</h3>
+                {search.recentSearches?.hits?.map((hit) => {
+                  return (
+                    <li key={hit._key}>
+                      <SearchBox.HitItem
+                        hit={hit}
+                        href={`/doc/${hit.document._id}`}
+                        className={s.hit}
+                      >
+                        <SearchBox.HitSnippet fieldPath="_title" />
+                        <SearchBox.HitSnippet fieldPath="content" />
+                      </SearchBox.HitItem>
+
+                      <button
+                        onClick={() => {
+                          search.recentSearches?.remove(hit._key);
+                        }}
+                      >
+                        X
+                      </button>
+                    </li>
+                  );
+                })}
+              </ul>
+            </SearchBox.HitsList>
+          </SearchBox.Placeholder>
+          <SearchBox.Empty>
+            <div>No results found for {search.query}</div>
+          </SearchBox.Empty>
           <SearchBox.HitsList asChild>
-            <ul>
-              <h3>Recent Searches</h3>
-              {search.recentSearches?.hits?.map((hit) => {
+            <ul style={{ maxHeight: 200, overflowY: "auto" }}>
+              {search.result?.hits.map((hit) => {
                 return (
                   <li key={hit._key}>
                     <SearchBox.HitItem
+                      key={hit._key}
                       hit={hit}
                       href={`/doc/${hit.document._id}`}
                       className={s.hit}
@@ -42,43 +74,13 @@ export const Search = () => {
                       <SearchBox.HitSnippet fieldPath="_title" />
                       <SearchBox.HitSnippet fieldPath="content" />
                     </SearchBox.HitItem>
-
-                    <button
-                      onClick={() => {
-                        search.recentSearches?.remove(hit._key);
-                      }}
-                    >
-                      X
-                    </button>
                   </li>
                 );
               })}
             </ul>
           </SearchBox.HitsList>
-        </SearchBox.Placeholder>
-        <SearchBox.Empty>
-          <div>No results found for {search.query}</div>
-        </SearchBox.Empty>
-        <SearchBox.HitsList asChild>
-          <ul style={{ maxHeight: 200, overflowY: "auto" }}>
-            {search.result?.hits.map((hit) => {
-              return (
-                <li key={hit._key}>
-                  <SearchBox.HitItem
-                    key={hit._key}
-                    hit={hit}
-                    href={`/doc/${hit.document._id}`}
-                    className={s.hit}
-                  >
-                    <SearchBox.HitSnippet fieldPath="_title" />
-                    <SearchBox.HitSnippet fieldPath="content" />
-                  </SearchBox.HitItem>
-                </li>
-              );
-            })}
-          </ul>
-        </SearchBox.HitsList>
-      </SearchBox.Root>
+        </SearchBox.Root>
+      )}
     </>
   );
 };