Skip to content

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

Merged
8bittitan merged 2 commits intomainfrom
fix/sidepanel-focus-on-open
Feb 10, 2026
Merged

fix(sidepanel): autofocus prompt input on open for desktop only#2857
8bittitan merged 2 commits intomainfrom
fix/sidepanel-focus-on-open

Conversation

@8bittitan
Copy link
Copy Markdown
Contributor

Summary

  • Autofocus the prompt textarea when the Sidepanel opens, but only on desktop (viewport > 768px) to avoid triggering the mobile virtual keyboard which disrupts the layout
  • Blur the prompt textarea when the Sidepanel closes to remove any lingering focus state
  • Replaces the previously commented-out autofocus logic with a mobile-aware implementation using the existing useIsMobile hook

Details

The autofocus-on-open logic was commented out in Sidepanel.tsx due to a known bug where focusing the textarea on mobile triggers the virtual keyboard and disrupts the layout. This PR re-enables the feature gated behind !isMobile, and additionally blurs the input on close.

Changes

packages/docsearch-react/src/Sidepanel/Sidepanel.tsx

  • Import useIsMobile hook (same pattern used by PromptForm, SidepanelHeader, and useManageSidepanelLayout)
  • Call useIsMobile() inside SidepanelInner
  • Replace the commented-out useEffect with a new one that:
    • Focuses the prompt input when isOpen && !isMobile
    • Blurs the prompt input when !isOpen
    • Includes a comment documenting the mobile limitation

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.
@netlify
Copy link
Copy Markdown

netlify Bot commented Feb 9, 2026

Deploy Preview for docsearch-demo failed.

Name Link
🔨 Latest commit 336694f
🔍 Latest deploy log https://app.netlify.com/projects/docsearch-demo/deploys/698b5656a840000008daab44

@netlify
Copy link
Copy Markdown

netlify Bot commented Feb 9, 2026

Deploy Preview for docsearch ready!

Name Link
🔨 Latest commit 336694f
🔍 Latest deploy log https://app.netlify.com/projects/docsearch/deploys/698b565679c6ba0008893ec7
😎 Deploy Preview https://deploy-preview-2857--docsearch.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@8bittitan 8bittitan self-assigned this Feb 9, 2026
@8bittitan 8bittitan merged commit b3fb7f5 into main Feb 10, 2026
2 of 6 checks passed
@8bittitan 8bittitan deleted the fix/sidepanel-focus-on-open branch February 10, 2026 16:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants