gpui-focus-handle

Manage keyboard focus and focus events for GPUI applications.

12.5k|757|Updated Jun 13, 2024
One-click install
npx skills add https://github.com/longbridge/gpui-component --skill gpui-focus-handle-longbridge
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: gpui-focus-handle
Source: https://github.com/longbridge/gpui-component/tree/main/.claude/skills/gpui-focus-handle
Command: npx skills add https://github.com/longbridge/gpui-component --skill gpui-focus-handle-longbridge

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

GPUI's focus system addresses the challenge of reliable keyboard navigation and focus management within complex UI trees.

Core Features & Use Cases

  • FocusHandle: Reference to focusable element
  • Focus tracking: Current focused element
  • Keyboard navigation: Tab/Shift-Tab between elements
  • Focus events: on_focus, on_blur

Quick Start

Create a focusable component by obtaining a FocusHandle from the context and attach it to elements with track_focus

Frequently Asked Questions about gpui-focus-handle

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement keyboard navigation in GPUI applications?

Keyboard navigation in GPUI applications is implemented by creating a FocusHandle and attaching it to widgets, enabling consistent Tab and Shift-Tab focus traversal across complex UI trees.

How do I bind on_focus and on_blur events to custom GPUI components?

Binding on_focus and on_blur events to custom GPUI components requires obtaining a FocusHandle from the context and using track_focus to attach it, ensuring reliable focus tracking for your widgets.

Why does focus traversal skip my custom widgets in GPUI?

Focus traversal skips custom widgets in GPUI when they lack a properly registered FocusHandle. You must obtain a handle from the context and attach it via track_focus to include them in the navigation order.

Can I track the currently focused element in a GPUI app?

You can track the currently focused element in a GPUI app by utilizing the built-in focus tracking system, which maintains a reference to the active FocusHandle during keyboard navigation.

Do I need any external dependencies to manage focus in GPUI?

No external dependencies are needed to manage focus in GPUI. The system provides FocusHandle creation and track_focus binding natively to handle keyboard navigation and focus events within your application.

What is the best way to handle focus in complex GPUI dialog trees?

The best way to handle focus in complex GPUI dialog trees is using the native FocusHandle system, which ensures consistent focus traversal and reliable on_focus and on_blur event handling across nested components.