Add a Cmd+K hint to the docs search field - #519
Merged
Conversation
Show a keyboard-shortcut badge inside the header search input, so the existing Cmd+K binding is discoverable rather than hidden. The badge fades out while the field has text, and swaps to "Ctrl K" off macOS. Only the header field carries it — below xl the field is hidden and search runs through the mobile overlay, which has no room for a badge. Also fix Cmd+K in the 1024-1280px band, where it focused an input that is rendered but hidden. It now clicks whichever search trigger is actually on screen, leaving DocsLayout's handler as the only place that knows how to open the overlay. Shorten the placeholder to "Search docs..." (en, tr, es, fr; the other locales were already short).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The docs search has had a Cmd+K binding for a while, but nothing advertised it. This adds the usual badge inside the field.
What changed
A shortcut badge in the header search field. Renders
⌘K, swapped toCtrl Koff macOS by a small inline script so it resolves during parse — no flash of the wrong glyph. It fades out once the field has text and comes back when cleared, which is pure CSS (:not(:placeholder-shown)), so no extra JS listener and nothing to keep in sync with the existing Algolia input handler.The badge is on the header field only. Below
xlthat field is hidden and search runs through the mobile overlay, whose trigger is a 20px icon with no room for a badge.Cmd+K now works in the 1024–1280px band. It previously called
.focus()on the header input, which in that band is in the DOM but hidden — so the shortcut silently did nothing. It now clicks whichever[data-search-trigger]is actually on screen, which keepsDocsLayout's delegated handler as the single place that knows how to open the overlay (focus timing, body scroll-lock, and Escape-to-close all come along unchanged).Visibility is a box test rather than a hardcoded breakpoint, so it reads the same
hidden xl:flexclasses the layout already uses and won't drift if the breakpoint moves.Placeholder shortened from "Search documentation..." to "Search docs...". I shortened
tr,es, andfrto match;zh,ja,vi, andruwere already short. Those three could use a native-speaker glance.Verified
Dev server, both themes:
Also checked: badge hides on typing and returns on clear;
Ctrl Kmeasures 44px and still fits inside the field's 64px right padding, so it can't collide with typed text; Escape closes the overlay and restores body scroll; repeat presses are idempotent; no console errors.