dan/gpui-component
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

otp_input: Fix to keep showing focus border when all code has filled. (#1047)

Browse source 
https://github.com/user-attachments/assets/dd10793e-668e-4c01-9bc9-fe00b539a5d1
This commit is contained in:
Jason Lee 2025-07-05 14:12:20 +08:00 committed by GitHub
parent 1f46b6b81c
commit 89ee8c0630
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 10 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
crates/ui/src/input/otp_input.rs
View file

@ -222,6 +222,11 @@ impl RenderOnce for OtpInput {
Size::Size(v) => v * 0.5, Size::Size(v) => v * 0.5,
}; };
let cursor_ix = state
.value
.chars()
.count()
.min(state.length.saturating_sub(1));
let mut groups: Vec<Vec<AnyElement>> = Vec::with_capacity(self.number_of_groups); let mut groups: Vec<Vec<AnyElement>> = Vec::with_capacity(self.number_of_groups);
let mut group_ix = 0; let mut group_ix = 0;
let group_items_count = state.length / self.number_of_groups; let group_items_count = state.length / self.number_of_groups;
@ -229,17 +234,17 @@ impl RenderOnce for OtpInput {
groups.push(vec![]); groups.push(vec![]);
} }
for i in 0..state.length { for ix in 0..state.length {
let c = state.value.chars().nth(i); let c = state.value.chars().nth(ix);
if i % group_items_count == 0 && i != 0 { if ix % group_items_count == 0 && ix != 0 {
group_ix += 1; group_ix += 1;
} }
let is_input_focused = i == state.value.chars().count() && is_focused; let is_input_focused = ix == cursor_ix && is_focused;
groups[group_ix].push( groups[group_ix].push(
h_flex() h_flex()
.id(("input-otp", i)) .id(("input-otp", ix))
.border_1() .border_1()
.border_color(cx.theme().input) .border_color(cx.theme().input)
.bg(cx.theme().background) .bg(cx.theme().background)