From 086c8489638e0d9fa8da4e44e8549d70131e2987 Mon Sep 17 00:00:00 2001
From: Enrique Gonzalez <enrique@sourcegraph.com>
Date: Tue, 22 Sep 2026 20:00:33 +0000
Subject: [PATCH] Require three characters before searching docs

Amp-Thread-ID: https://ampcode.com/threads/T-01a0ca8a-763a-7208-8639-edbaaa47c876
Co-authored-by: Amp <amp@ampcode.com>
---
 .../search/docsearch/DocSearchModal.tsx       |  6 +++-
 .../search/docsearch/ScreenState.tsx          | 34 ++++++++++++++-----
 src/components/search/docsearch/constants.ts  |  1 +
 3 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/src/components/search/docsearch/DocSearchModal.tsx b/src/components/search/docsearch/DocSearchModal.tsx
index 3c8d617fc..946e61280 100644
--- a/src/components/search/docsearch/DocSearchModal.tsx
+++ b/src/components/search/docsearch/DocSearchModal.tsx
@@ -14,7 +14,7 @@ import type {ScreenStateTranslations} from './ScreenState';
 import {ScreenState} from './ScreenState';
 import type {SearchBoxTranslations} from './SearchBox';
 import {SearchBox} from './SearchBox';
-import {MAX_QUERY_SIZE} from './constants';
+import {MAX_QUERY_SIZE, MIN_QUERY_SIZE} from './constants';
 import {createStoredSearches} from './stored-searches';
 import type {
 	DocSearchHit,
@@ -231,6 +231,10 @@ export function DocSearchModal({
 						];
 					}
 
+					if (query.trim().length < MIN_QUERY_SIZE) {
+						return [];
+					}
+
 					const insightsActive = Boolean(insights);
 					const product = sourcesState.context.activeProduct as
 						| string
diff --git a/src/components/search/docsearch/ScreenState.tsx b/src/components/search/docsearch/ScreenState.tsx
index ad5872c0b..ba0ca133c 100644
--- a/src/components/search/docsearch/ScreenState.tsx
+++ b/src/components/search/docsearch/ScreenState.tsx
@@ -6,6 +6,7 @@ import type {
 import React from 'react';
 
 import type {DocSearchProps} from './DocSearch';
+import {MIN_QUERY_SIZE} from './constants';
 import type {ErrorScreenTranslations} from './ErrorScreen';
 import {ErrorScreen} from './ErrorScreen';
 import type {NoResultsScreenTranslations} from './NoResultsScreen';
@@ -22,13 +23,14 @@ export type ScreenStateTranslations = Partial<{
 	noResultsScreen: NoResultsScreenTranslations;
 }>;
 
-export interface ScreenStateProps<TItem extends BaseItem>
-	extends AutocompleteApi<
-		TItem,
-		React.FormEvent,
-		React.MouseEvent,
-		React.KeyboardEvent
-	> {
+export interface ScreenStateProps<
+	TItem extends BaseItem
+> extends AutocompleteApi<
+	TItem,
+	React.FormEvent,
+	React.MouseEvent,
+	React.KeyboardEvent
+> {
 	state: AutocompleteState<TItem>;
 	recentSearches: StoredSearchPlugin<StoredDocSearchHit>;
 	favoriteSearches: StoredSearchPlugin<StoredDocSearchHit>;
@@ -47,6 +49,19 @@ export interface ScreenStateProps<TItem extends BaseItem>
 
 export const ScreenState = React.memo(
 	({translations = {}, ...props}: ScreenStateProps<InternalDocSearchHit>) => {
+		if (
+			props.state.query &&
+			props.state.query.trim().length < MIN_QUERY_SIZE
+		) {
+			return (
+				<div className="DocSearch-StartScreen">
+					<p className="DocSearch-Help" role="status">
+						Type at least {MIN_QUERY_SIZE} characters to search.
+					</p>
+				</div>
+			);
+		}
+
 		if (props.state.status === 'error') {
 			return <ErrorScreen translations={translations?.errorScreen} />;
 		}
@@ -82,8 +97,9 @@ export const ScreenState = React.memo(
 		//  - Empty screen → Results screen
 		//  - NoResults screen → NoResults screen with another query
 		return (
-			nextProps.state.status === 'loading' ||
-			nextProps.state.status === 'stalled'
+			nextProps.state.query.trim().length >= MIN_QUERY_SIZE &&
+			(nextProps.state.status === 'loading' ||
+				nextProps.state.status === 'stalled')
 		);
 	}
 );
diff --git a/src/components/search/docsearch/constants.ts b/src/components/search/docsearch/constants.ts
index bbeca55a1..2c88c58ba 100644
--- a/src/components/search/docsearch/constants.ts
+++ b/src/components/search/docsearch/constants.ts
@@ -1 +1,2 @@
+export const MIN_QUERY_SIZE = 3;
 export const MAX_QUERY_SIZE = 64;