Skip to content

feat: add smooth glow/border animation on Input focus #1747

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
pixeltannu wants to merge 4 commits into
base: main
Choose a base branch
from
+30 −0
Open

feat: add smooth glow/border animation on Input focus #1747

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
63875d3
chore: trigger CI re-run
pixeltannu Jun 19, 2026
f956c1b
feat: add focus glow/border animation on Input fields
pixeltannu Jun 22, 2026
dfc47d0
fix: replace borderFg with fg for Input focus animation
pixeltannu Jun 22, 2026
660400a
fix: use correct Color type object for Input focus animation
pixeltannu Jun 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions packages/ui/src/EmailInput.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,6 +140,12 @@ export class EmailInput extends Widget {
}

protected _renderSelf(screen: Screen): void {
// Apply glow effect on focus by changing border style
if (this.isFocused) {
this._style.border = 'single';
} else {

}
Comment on lines +143 to +148

@coderabbitai coderabbitai Bot Jun 22, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Focused glow currently wipes custom border color after blur

When focus is lost, setting this._style.borderFg = undefined permanently drops any caller-provided border color, so the component does not return to its configured style.

Proposed fix 
 protected _renderSelf(screen: Screen): void {
-    // Apply glow effect on focus by changing border style
-    if (this.isFocused) {
-        this._style.borderFg = 'cyan';
-    } else {
-        this._style.borderFg = undefined;
-    }
+    const baseBorderFg = this.style.borderFg;
+    this._style.borderFg = this.isFocused ? 'cyan' : baseBorderFg;
     const rect = this._getContentRect();
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
// Apply glow effect on focus by changing border style
if (this.isFocused) {
this._style.borderFg = 'cyan';
} else {
this._style.borderFg = undefined;
}
protected _renderSelf(screen: Screen): void {
const baseBorderFg = this.style.borderFg;
this._style.borderFg = this.isFocused ? 'cyan' : baseBorderFg;
const rect = this._getContentRect();
// ... rest of method
}
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/ui/src/EmailInput.ts` around lines 143 - 148, The focus/blur logic
in EmailInput is incorrectly wiping the custom border color when focus is lost.
Instead of setting this._style.borderFg to undefined when this.isFocused is
false, you need to restore it to the original/configured border color value.
Store the default or caller-provided border color as a property during
initialization (such as in a constructor or property definition), then restore
to that stored value in the else block instead of setting it to undefined, so
the component returns to its properly configured style after blur.

const rect = this._getContentRect();
const { x, y, width, height } = rect;
if (width <= 0 || height <= 0) return;
Expand Down
6 changes: 6 additions & 0 deletions packages/ui/src/PasswordInput.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -267,6 +267,12 @@ export class PasswordInput extends Widget {
}

protected _renderSelf(screen: Screen): void {
// Apply glow effect on focus by changing border style
if (this.isFocused) {
this._style.border = 'single';
} else {

}
Comment on lines +270 to +275

@coderabbitai coderabbitai Bot Jun 22, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Blur path discards configured borderFg

The unfocused branch resets borderFg to undefined, which overrides prior style configuration instead of restoring it.

Proposed fix 
 protected _renderSelf(screen: Screen): void {
-    // Apply glow effect on focus by changing border style
-    if (this.isFocused) {
-        this._style.borderFg = 'cyan';
-    } else {
-        this._style.borderFg = undefined;
-    }
+    const baseBorderFg = this.style.borderFg;
+    this._style.borderFg = this.isFocused ? 'cyan' : baseBorderFg;
     const rect = this._getContentRect();
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
// Apply glow effect on focus by changing border style
if (this.isFocused) {
this._style.borderFg = 'cyan';
} else {
this._style.borderFg = undefined;
}
const baseBorderFg = this.style.borderFg;
this._style.borderFg = this.isFocused ? 'cyan' : baseBorderFg;
const rect = this._getContentRect();
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/ui/src/PasswordInput.ts` around lines 128 - 133, In the
PasswordInput class, the blur path unconditionally sets this._style.borderFg to
undefined, which discards any previously configured borderFg value. Store the
original borderFg value in a private field before applying the focus effect
(when this.isFocused is true), and restore that stored value in the else branch
instead of setting it to undefined.

const rect = this._getContentRect();
const { x, y, width, height } = rect;
if (width <= 0 || height <= 0) return;
Expand Down
6 changes: 6 additions & 0 deletions packages/ui/src/PathInput.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -209,6 +209,12 @@ export class PathInput extends Widget {
}

protected _renderSelf(screen: Screen): void {
// Apply glow effect on focus by changing border style
if (this.isFocused) {
this._style.border = 'single';
} else {

}
Comment on lines +212 to +217

@coderabbitai coderabbitai Bot Jun 22, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Focus glow logic is not style-safe

Clearing this._style.borderFg on blur removes custom theme values and leaves the widget with no configured border color.

Proposed fix 
 protected _renderSelf(screen: Screen): void {
-    // Apply glow effect on focus by changing border style
-    if (this.isFocused) {
-        this._style.borderFg = 'cyan';
-    } else {
-        this._style.borderFg = undefined;
-    }
+    const baseBorderFg = this.style.borderFg;
+    this._style.borderFg = this.isFocused ? 'cyan' : baseBorderFg;
     const rect = this._getContentRect();
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/ui/src/PathInput.ts` around lines 212 - 217, The focus glow logic in
PathInput is unsafely clearing the borderFg style when unfocused by setting it
to undefined, which removes any custom theme values instead of preserving them.
Modify the blur handling (the else branch where isFocused is false) to restore
the original borderFg color value that existed before the focus glow was
applied, rather than setting it to undefined. Store and track the initial
borderFg value so it can be properly restored on blur, ensuring custom theme
styles are preserved.

const rect = this._getContentRect();
const { x, y, width, height } = rect;
if (width <= 0 || height <= 0) return;
Expand Down
6 changes: 6 additions & 0 deletions packages/ui/src/SearchInput.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,12 @@ export class SearchInput extends Widget {
}

protected _renderSelf(screen: Screen): void {
// Apply glow effect on focus by changing border style
if (this.isFocused) {
this._style.border = 'single';
} else {

}
Comment thread
coderabbitai[bot] marked this conversation as resolved.
const rect = this._getContentRect();
const { x, y, width, height } = rect;
if (width <= 0 || height <= 0) return;
Expand Down
6 changes: 6 additions & 0 deletions packages/ui/src/TextArea.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,6 +158,12 @@ export class TextArea extends Widget {
}

protected _renderSelf(screen: Screen): void {
// Apply glow effect on focus by changing border style
if (this.isFocused) {
this._style.border = 'single';
} else {

}
Comment on lines +161 to +166

@coderabbitai coderabbitai Bot Jun 22, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Border glow implementation overrides base styling

The blur path resets border color to undefined, so a custom borderFg is not restored after focus leaves the component.

Proposed fix 
 protected _renderSelf(screen: Screen): void {
-    // Apply glow effect on focus by changing border style
-    if (this.isFocused) {
-        this._style.borderFg = 'cyan';
-    } else {
-        this._style.borderFg = undefined;
-    }
+    const baseBorderFg = this.style.borderFg;
+    this._style.borderFg = this.isFocused ? 'cyan' : baseBorderFg;
     const rect = this._getContentRect();
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/ui/src/TextArea.ts` around lines 161 - 166, The TextArea component's
focus glow effect is overriding base styling by setting borderFg to undefined
when the component loses focus. Instead of resetting to undefined in the else
block (when this.isFocused is false), store the original border color value
before applying the cyan glow effect, and restore that original value when focus
is lost. This ensures that any custom borderFg styling is preserved and properly
restored after the focus state changes.

const rect = this._getContentRect();
const { x, y, width, height } = rect;
if (width <= 0 || height <= 0) return;
Expand Down
Loading