Skip to content

feat: Add focusable option to Box#585

Merged
kommander merged 5 commits intoanomalyco:mainfrom
eitanalka:feat/box-focusable
Jan 26, 2026
Merged

feat: Add focusable option to Box#585
kommander merged 5 commits intoanomalyco:mainfrom
eitanalka:feat/box-focusable

Conversation

@eitanalka
Copy link
Contributor

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

  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

// 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

eitanalka and others added 2 commits January 23, 2026 14:10
Enable Box to be focused by adding a `focusable` option (default false).
When focusable is true, the existing `focusedBorderColor` feature works.

Changes:
- Add focusable setter to Renderable for dynamic prop updates
- Add focusable option to BoxOptions
- Add focused prop to BoxProps (React/Solid) for controlled focus

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@pkg-pr-new
Copy link

pkg-pr-new bot commented Jan 25, 2026

@opentui/core

npm i https://pkg.pr.new/anomalyco/opentui/@opentui/core@585

@opentui/react

npm i https://pkg.pr.new/anomalyco/opentui/@opentui/react@585

@opentui/solid

npm i https://pkg.pr.new/anomalyco/opentui/@opentui/solid@585

@opentui/core-darwin-arm64

npm i https://pkg.pr.new/anomalyco/opentui/@opentui/core-darwin-arm64@585

@opentui/core-darwin-x64

npm i https://pkg.pr.new/anomalyco/opentui/@opentui/core-darwin-x64@585

@opentui/core-linux-arm64

npm i https://pkg.pr.new/anomalyco/opentui/@opentui/core-linux-arm64@585

@opentui/core-linux-x64

npm i https://pkg.pr.new/anomalyco/opentui/@opentui/core-linux-x64@585

@opentui/core-win32-arm64

npm i https://pkg.pr.new/anomalyco/opentui/@opentui/core-win32-arm64@585

@opentui/core-win32-x64

npm i https://pkg.pr.new/anomalyco/opentui/@opentui/core-win32-x64@585

commit: ea12e68

@kommander
Copy link
Collaborator

@eitanalka I can't push to your branch, so you would have to run bun prettier:write in the repo to fix it. There should probably be a workflow to run fix & commit for PRs.

@eitanalka
Copy link
Contributor Author

@kommander I updated the branch

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants