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.