[PR #584] [MERGED] feat: Auto-focus on click (browser-like behavior) #1421

New issue

Closed

opened 2026-03-14 09:35:45 +03:00 by kerem · 0 comments

kerem commented

2026-03-14 09:35:45 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/anomalyco/opentui/pull/584
Author: @eitanalka
Created: 1/25/2026
Status: ✅ Merged
Merged: 1/30/2026
Merged by: @kommander

Base: main ← Head: feature-auto-focus-on-click

📝 Commits (10+)

8a0a76a feat(core): auto-focus on click (browser-like behavior)
3c988bb Merge branch 'anomalyco:main' into feature-auto-focus-on-click
688f0df Merge branch 'main' into feature-auto-focus-on-click
e06b07a prettier
441ff2e feat(core): make auto-focus cancelable via preventDefault
6ccd6fa Merge branch 'main' into feature-auto-focus-on-click
ea973b5 Merge branch 'main' into feature-auto-focus-on-click
951ce56 dispatch
bd3b8dc more coverage
3cb160e Merge branch 'main' into feature-auto-focus-on-click

📊 Changes

3 files changed (+264 additions, -5 deletions)

View changed files

📝 packages/core/src/renderer.ts (+24 -5)
➕ packages/core/src/tests/renderer.focus.test.ts (+209 -0)
📝 packages/core/src/tests/renderer.mouse.test.ts (+31 -0)

📄 Description

Fixes Issue #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

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/anomalyco/opentui/pull/584 **Author:** [@eitanalka](https://github.com/eitanalka) **Created:** 1/25/2026 **Status:** ✅ Merged **Merged:** 1/30/2026 **Merged by:** [@kommander](https://github.com/kommander) **Base:** `main` ← **Head:** `feature-auto-focus-on-click` --- ### 📝 Commits (10+) - [`8a0a76a`](https://github.com/anomalyco/opentui/commit/8a0a76aedf85930bb308e9fc0b99f7b363376987) feat(core): auto-focus on click (browser-like behavior) - [`3c988bb`](https://github.com/anomalyco/opentui/commit/3c988bbf8064cee6b4b8d1d308dceb817046f46f) Merge branch 'anomalyco:main' into feature-auto-focus-on-click - [`688f0df`](https://github.com/anomalyco/opentui/commit/688f0df5a038adada4665a4bb84c02aac5dac4ab) Merge branch 'main' into feature-auto-focus-on-click - [`e06b07a`](https://github.com/anomalyco/opentui/commit/e06b07a633f97719c2410f917be1a23c0e0d49c1) prettier - [`441ff2e`](https://github.com/anomalyco/opentui/commit/441ff2e08162a3de4522d41ea724852155a7e916) feat(core): make auto-focus cancelable via preventDefault - [`6ccd6fa`](https://github.com/anomalyco/opentui/commit/6ccd6fac8a70e3d6ac1053885dd8881f54f64157) Merge branch 'main' into feature-auto-focus-on-click - [`ea973b5`](https://github.com/anomalyco/opentui/commit/ea973b5eecffd246727d542f784aaf61f3085498) Merge branch 'main' into feature-auto-focus-on-click - [`951ce56`](https://github.com/anomalyco/opentui/commit/951ce56c36edf5926069b0e1ba8006a101d47b61) dispatch - [`bd3b8dc`](https://github.com/anomalyco/opentui/commit/bd3b8dc7db23b49952a6289ba75a2065fbc69565) more coverage - [`3cb160e`](https://github.com/anomalyco/opentui/commit/3cb160eff637bb032b17a3af5545b4bee7fdb234) Merge branch 'main' into feature-auto-focus-on-click ### 📊 Changes **3 files changed** (+264 additions, -5 deletions) <details> <summary>View changed files</summary> 📝 `packages/core/src/renderer.ts` (+24 -5) ➕ `packages/core/src/tests/renderer.focus.test.ts` (+209 -0) 📝 `packages/core/src/tests/renderer.mouse.test.ts` (+31 -0) </details> ### 📄 Description Fixes [Issue #576](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 --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>