[PR #585] [MERGED] feat: Add focusable option to Box #1419

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/585
Author: @eitanalka
Created: 1/25/2026
Status: ✅ Merged
Merged: 1/26/2026
Merged by: @kommander

Base: main ← Head: feat/box-focusable

📝 Commits (5)

b79454c feat(core): add focusable option to Box
8b7faf5 Merge branch 'anomalyco:main' into feat/box-focusable
e9158e2 prettier
34493d5 Merge branch 'main' into feat/box-focusable
ea12e68 Merge branch 'main' into feat/box-focusable

📊 Changes

7 files changed (+131 additions, -2 deletions)

View changed files

📝 packages/core/src/Renderable.ts (+4 -0)
📝 packages/core/src/renderables/Box.test.ts (+27 -0)
📝 packages/core/src/renderables/Box.ts (+5 -0)
📝 packages/react/src/types/components.ts (+3 -1)
📝 packages/react/tests/layout.test.tsx (+45 -0)
📝 packages/solid/src/types/elements.ts (+3 -1)
➕ packages/solid/tests/box.test.tsx (+44 -0)

📄 Description

Issue

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

_{🔄 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/585 **Author:** [@eitanalka](https://github.com/eitanalka) **Created:** 1/25/2026 **Status:** ✅ Merged **Merged:** 1/26/2026 **Merged by:** [@kommander](https://github.com/kommander) **Base:** `main` ← **Head:** `feat/box-focusable` --- ### 📝 Commits (5) - [`b79454c`](https://github.com/anomalyco/opentui/commit/b79454c381e80c707a30acd98a494763c8430c61) feat(core): add focusable option to Box - [`8b7faf5`](https://github.com/anomalyco/opentui/commit/8b7faf5424e706e4e3e07c8135ad54a8ee1837b2) Merge branch 'anomalyco:main' into feat/box-focusable - [`e9158e2`](https://github.com/anomalyco/opentui/commit/e9158e2ddc9ca337a3e3927c2dd7ed6a38837994) prettier - [`34493d5`](https://github.com/anomalyco/opentui/commit/34493d529810ef4bddcbb6fb2b403cd3fd412a27) Merge branch 'main' into feat/box-focusable - [`ea12e68`](https://github.com/anomalyco/opentui/commit/ea12e686911e7105616e5c7d5574dd969c9af161) Merge branch 'main' into feat/box-focusable ### 📊 Changes **7 files changed** (+131 additions, -2 deletions) <details> <summary>View changed files</summary> 📝 `packages/core/src/Renderable.ts` (+4 -0) 📝 `packages/core/src/renderables/Box.test.ts` (+27 -0) 📝 `packages/core/src/renderables/Box.ts` (+5 -0) 📝 `packages/react/src/types/components.ts` (+3 -1) 📝 `packages/react/tests/layout.test.tsx` (+45 -0) 📝 `packages/solid/src/types/elements.ts` (+3 -1) ➕ `packages/solid/tests/box.test.tsx` (+44 -0) </details> ### 📄 Description [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 | --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>