[GH-ISSUE #577] feat: Add focusable option to Box #157

New issue

Closed

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

kerem commented

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

Owner

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

Summary

Add a focusable option to Box so it can be made focusable (default false). This enables the existing focusedBorderColor feature to actually work.

Motivation

Currently, Box has a focusedBorderColor option but Box cannot be focused, making this option useless. Adding focusable allows users to opt-in to focus behavior.

Proposed Changes

Add focusable setter to Renderable for dynamic prop updates
Add focusable option to BoxOptions (default false)
Add focused prop to BoxProps (React/Solid) for controlled focus state

Usage

// Imperative
const box = new Box({ focusable: true, focusedBorderColor: "blue", border: true })

// React/Solid JSX
<Box focusable focusedBorderColor="blue" border />
<Box focusable focused={isFocused} focusedBorderColor="blue" border />

Behavior

Usage	Result
`new Box({})`	Not focusable (default)
`new Box({ focusable: true })`	Focusable
`new Box({ focusable: true, focusedBorderColor: "blue" })`	Shows blue border when focused
`<Box focusable />`	Focusable via JSX boolean shorthand
`<Box focusable focused={signal()} />`	Controlled focus state

Implementation

I have a working implementation with tests ready:

Branch: feat/box-focusable
Diff: View changes

Originally created by @eitanalka on GitHub (Jan 23, 2026). Original GitHub issue: https://github.com/anomalyco/opentui/issues/577 ## Summary Add a `focusable` option to Box so it can be made focusable (default false). This enables the existing `focusedBorderColor` feature to actually work. ## Motivation Currently, Box has a `focusedBorderColor` option but Box cannot be focused, making this option useless. Adding `focusable` allows users to opt-in to focus behavior. ## Proposed Changes 1. Add `focusable` setter to `Renderable` for dynamic prop updates 2. Add `focusable` option to `BoxOptions` (default false) 3. Add `focused` prop to `BoxProps` (React/Solid) for controlled focus state ## Usage ```typescript // Imperative const box = new Box({ focusable: true, focusedBorderColor: "blue", border: true }) // React/Solid JSX <Box focusable focusedBorderColor="blue" border /> <Box focusable focused={isFocused} focusedBorderColor="blue" border /> ``` ## Behavior | Usage | Result | |-------|--------| | `new Box({})` | Not focusable (default) | | `new Box({ focusable: true })` | Focusable | | `new Box({ focusable: true, focusedBorderColor: "blue" })` | Shows blue border when focused | | `<Box focusable />` | Focusable via JSX boolean shorthand | | `<Box focusable focused={signal()} />` | Controlled focus state | ## Implementation I have a working implementation with tests ready: - **Branch:** [feat/box-focusable](https://github.com/eitanalka/opentui/tree/feat/box-focusable) - **Diff:** [View changes](https://github.com/eitanalka/opentui/compare/main...feat/box-focusable)

kerem

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

closed this issue
added the
feature

core
labels

kerem commented

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

Author

Owner

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

yep, also makes sense 👍

@kommander commented on GitHub (Jan 24, 2026): yep, also makes sense 👍

kerem commented

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

Author

Owner

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

yep, also makes sense 👍

Thank you. Opened a PR for this one as well.

@eitanalka commented on GitHub (Jan 25, 2026): > yep, also makes sense 👍 Thank you. Opened a PR for this one as well.

kerem commented

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

Author

Owner

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

This should be fixed with #585

@kommander commented on GitHub (Jan 26, 2026): This should be fixed with #585

kerem referenced this issue

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

[PR #157] [MERGED] feat(text): reimplement text primitive #329

kerem referenced this issue

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