Skip to content

Conversation

Copy link
Contributor

Copilot AI commented Sep 25, 2025

Implements keyboard shortcut functionality for the search component in the Documentation site, allowing users to quickly focus the search input using Ctrl+K (Windows/Linux) or ⌘K (Mac).

Changes Made

Visual Enhancement

  • Added a subtle keyboard shortcut hint displayed inside the search input
  • Automatically shows the appropriate shortcut based on platform detection:
    • Ctrl+K on Windows/Linux systems
    • ⌘K on Mac systems
  • Positioned to not interfere with user input and styled to be unobtrusive

JavaScript Integration

  • Created Search.razor.js module that handles global keyboard event listening
  • Supports both Ctrl+K and Meta+K (Cmd+K) key combinations
  • Prevents default browser behavior when shortcut is activated
  • Properly integrates with Blazor component lifecycle

Component Updates

  • Enhanced Search.razor.cs with JavaScript interop functionality
  • Added platform detection to determine Mac vs non-Mac systems
  • Implemented proper disposal pattern to prevent memory leaks
  • Added [JSInvokable] method to handle focus requests from JavaScript

Implementation Details

The implementation follows established patterns in the codebase:

  • Uses ES6 module exports for JavaScript functionality
  • Follows Blazor component lifecycle with OnAfterRenderAsync and DisposeAsync
  • Maintains backward compatibility with existing search functionality
  • Uses Bootstrap positioning classes for consistent styling

Testing

  • ✅ Verified keyboard shortcut works on both Windows and Mac key combinations
  • ✅ Confirmed visual hint displays correctly for both platforms
  • ✅ Tested proper disposal of event listeners
  • ✅ Build verification passed with no compilation errors

This enhancement improves the user experience by providing a familiar keyboard shortcut pattern commonly used in modern web applications and documentation sites.

Fixes #[issue-number]

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

  • huggingface.co
    • Triggering command: /usr/share/dotnet/dotnet /usr/share/dotnet/sdk/9.0.305/MSBuild.dll /noautoresponse /nologo /nodemode:1 /nodeReuse:true /low:false (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Original prompt

This section details on the original issue you should resolve

<issue_title>[doc] Search - focus with Ctrl+K keyboard shortcut</issue_title>
<issue_description>This is not meant as new HxSearchBox feature, but rather a local change in Havit.Blazor.Documentation site.

Inspiration

    const handleCk = (event: KeyboardEvent) => {
      if (event.ctrlKey || event.metaKey) {
        if (event.key?.toLowerCase() === "k") {
          event.preventDefault();
          inputRef.current.focus();
        }
      }
    };

    window.addEventListener("keydown", handleCk);

    return () => {
      window.removeEventListener("keydown", handleCk);
    };

We should add some UX hint, such as
image

(Might be customized to Cmd+K on MacOS.)
image

We might consider adding support for keyboard shortcut to HxSearchBox (search in doc might be ported to HxSearchBox instead of current HxAutosuggest implementation).</issue_description>

<agent_instructions>Try a new PR.</agent_instructions>

Comments on the Issue (you are @copilot in this section)

Fixes #933

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Copilot AI and others added 2 commits September 25, 2025 17:54
Co-authored-by: hakenr <12828888+hakenr@users.noreply.github.com>
Co-authored-by: hakenr <12828888+hakenr@users.noreply.github.com>
Copilot AI changed the title [WIP] [doc] Search - focus with Ctrl+K keyboard shortcut [doc] Add Ctrl+K keyboard shortcut to focus search input Sep 25, 2025
Copilot AI requested a review from hakenr September 25, 2025 18:00
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.

[doc] Search - focus with Ctrl+K keyboard shortcut

2 participants