nikon/docsearch
1
0
Fork 0
Code Activity Actions

fix(sidepanel): autofocus prompt input on open for desktop only (#2857)

Browse source 
Focus the prompt textarea when the sidepanel opens, skipping mobile
to avoid triggering the virtual keyboard which disrupts the layout.
Blur the input when the sidepanel closes to remove lingering focus.
This commit is contained in:
Paul Jankowski 2026-02-10 11:28:20 -05:00 committed by GitHub
parent fbb975b142
commit b3fb7f50f8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 15 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
packages/docsearch-react/src/Sidepanel/Sidepanel.tsx
View file

@ -6,6 +6,7 @@ import { AlgoliaLogo, type AlgoliaLogoTranslations } from '../AlgoliaLogo';
import type { DocSearchSidepanelProps, SidepanelSearchParameters } from '../Sidepanel';
import type { StoredAskAiState, SuggestedQuestionHit } from '../types';
import { useAskAi } from '../useAskAi';
import { useIsMobile } from '../useIsMobile';
import { useSearchClient } from '../useSearchClient';
import { useSuggestedQuestions } from '../useSuggestedQuestions';
import { buildDummyAskAiHit } from '../utils/ai';
@ -159,6 +160,7 @@ function SidepanelInner(
const [stoppedStreaming, setStoppedStreaming] = React.useState(false);
const sidepanelContainerRef = React.useRef<HTMLDivElement>(null);
const promptInputRef = React.useRef<HTMLTextAreaElement>(null);
const isMobile = useIsMobile();
const expectedWidth = useSidepanelWidth({
isExpanded,
@ -342,11 +344,19 @@ function SidepanelInner(
}
}, [initialMessage, sendMessage, conversations, handleSelectConversation, setMessages]);
// eslint-disable-next-line no-warning-comments
// FIX: Renable autofocus on open once mobile focus issue is solved
// React.useEffect(() => {
// promptInputRef.current?.focus();
// }, [isOpen]);
// Autofocus the prompt input when the sidepanel opens and blur it when
// it closes. Disabled on mobile because focusing the textarea triggers the
// virtual keyboard which disrupts the layout — this is a known issue that
// has not been resolved yet.
React.useEffect(() => {
if (isOpen && !isMobile) {
promptInputRef.current?.focus();
}
if (!isOpen) {
promptInputRef.current?.blur();
}
}, [isOpen, isMobile]);
return (
<div