[GH-ISSUE #576] feat: Auto-focus on click (browser-like behavior) #154

New issue

Closed

opened 2026-03-02 23:44:56 +03:00 by kerem · 3 comments

kerem commented

2026-03-02 23:44:56 +03:00

Owner

Originally created by @eitanalka on GitHub (Jan 23, 2026).
Original GitHub issue: https://github.com/anomalyco/opentui/issues/576

Problem

Currently, clicking on a focusable element (input, scrollbox, etc.) doesn't automatically focus it. Users must manually handle onMouseDown to set focus state, which is different from browser behavior.

Proposed Solution

Add browser-like auto-focus behavior to the renderer:

Left-click triggers focus() on the clicked element
If the element isn't focusable, bubble up to find the closest focusable ancestor
Uses the same parent traversal pattern as isWithinContainer

Benefits

Matches expected browser behavior
Simplifies component code (no manual onMouseDown handlers needed)
Works seamlessly with focusedBorderColor/focusedBackgroundColor style props

Implementation

I have a working implementation with tests ready:

Branch: feature-auto-focus-on-click
Diff: View changes

Code changes:

packages/core/src/renderer.ts - ~10 lines to handle auto-focus with parent bubbling
packages/core/src/tests/renderer.focus.test.ts - 3 tests covering the behavior

Happy to open a PR if this approach looks good!

Originally created by @eitanalka on GitHub (Jan 23, 2026). Original GitHub issue: https://github.com/anomalyco/opentui/issues/576 ## Problem Currently, clicking on a focusable element (input, scrollbox, etc.) doesn't automatically focus it. Users must manually handle `onMouseDown` to set focus state, which is different from browser behavior. ## Proposed Solution Add browser-like auto-focus behavior to the renderer: - Left-click triggers `focus()` on the clicked element - If the element isn't focusable, bubble up to find the closest focusable ancestor - Uses the same parent traversal pattern as `isWithinContainer` ## Benefits - Matches expected browser behavior - Simplifies component code (no manual `onMouseDown` handlers needed) - Works seamlessly with `focusedBorderColor`/`focusedBackgroundColor` style props ## Implementation I have a working implementation with tests ready: - **Branch:** [feature-auto-focus-on-click](https://github.com/eitanalka/opentui/tree/feature-auto-focus-on-click) - **Diff:** [View changes](https://github.com/eitanalka/opentui/compare/main...feature-auto-focus-on-click) ### Code changes: 1. `packages/core/src/renderer.ts` - ~10 lines to handle auto-focus with parent bubbling 2. `packages/core/src/tests/renderer.focus.test.ts` - 3 tests covering the behavior Happy to open a PR if this approach looks good!

kerem

2026-03-02 23:44:56 +03:00

closed this issue
added the
feature

core
labels

kerem commented

2026-03-02 23:44:57 +03:00

Author

Owner

@kommander commented on GitHub (Jan 24, 2026):

makes sense and looks simple enough

@kommander commented on GitHub (Jan 24, 2026): makes sense and looks simple enough

kerem commented

2026-03-02 23:44:57 +03:00

Author

Owner

@eitanalka commented on GitHub (Jan 25, 2026):

makes sense and looks simple enough

Thank you. I opened a PR.

@eitanalka commented on GitHub (Jan 25, 2026): > makes sense and looks simple enough Thank you. I opened a PR.

kerem commented

2026-03-02 23:44:58 +03:00

Author

Owner

@viralcodex commented on GitHub (Jan 28, 2026):

hi @eitanalka, in your PR please add fixes: to link it to this issue automatically

@viralcodex commented on GitHub (Jan 28, 2026): hi @eitanalka, in your PR please add fixes: <issue> to link it to this issue automatically

kerem referenced this issue

2026-03-02 23:45:59 +03:00

[PR #154] [MERGED] Update scroll examples to use solid-isms #326

kerem referenced this issue

2026-03-14 09:18:53 +03:00

[PR #154] [MERGED] Update scroll examples to use solid-isms #1109