Skip to content

fix: document open in new tab#2737

Merged
dylantientcheu merged 1 commit into
mainfrom
fix/document-open-in-new-tab
Aug 28, 2025
Merged

fix: document open in new tab#2737
dylantientcheu merged 1 commit into
mainfrom
fix/document-open-in-new-tab

Conversation

@dylantientcheu
Copy link
Copy Markdown
Contributor

@dylantientcheu dylantientcheu commented Aug 28, 2025

Summary

  • Documents the solution for opening DocSearch results in new tabs
  • Adds a new section to the examples page explaining the hitComponent + navigator approach
  • Provides working code examples and interactive demo

Problem

In DocSearch, using only hitComponent with target="_blank" doesn't work consistently - it opens links in new tabs when clicked, but keyboard navigation (arrows + Enter) still opens links in the same window.

Solution

This PR documents the complete solution that requires both:

  1. Custom hitComponent with target="_blank" for click behavior
  2. Custom navigator prop to handle keyboard navigation consistently

Changes

  • Added "Opening links in new tabs" section to docs/examples.mdx
  • Includes code examples showing both hitComponent and navigator setup
  • Added interactive demo component
  • Added warning note explaining why both props are needed

Fixes #2702

@netlify
Copy link
Copy Markdown

netlify Bot commented Aug 28, 2025

Deploy Preview for docsearch ready!

Name Link
🔨 Latest commit 620df47
🔍 Latest deploy log https://app.netlify.com/projects/docsearch/deploys/68b02db077f8210008f8c987
😎 Deploy Preview https://deploy-preview-2737--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.

@dylantientcheu dylantientcheu merged commit d26e13d into main Aug 28, 2025
5 of 10 checks passed
@dylantientcheu dylantientcheu deleted the fix/document-open-in-new-tab branch August 28, 2025 10:24
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.

hitComponent prop in React component does not honor target="_blank" when navigating by keyboard

1 participant