guise/input/
autocomplete.rs

1//! `Autocomplete` — a freeform text field with suggestions (gpui entity).
2//!
3//! Unlike [`Combobox`](super::Combobox) (pick one of the options), the value
4//! here is whatever the user types — suggestions are shortcuts, not
5//! constraints. Arrow keys walk the list, Enter adopts the highlighted
6//! suggestion (or commits the typed text), Escape closes.
7
8use gpui::prelude::*;
9use gpui::{
10    deferred, div, px, App, Context, Entity, EventEmitter, FocusHandle, IntoElement, KeyDownEvent,
11    SharedString, Window,
12};
13
14use super::line::{self, Line, LineEditor, LineState};
15use super::{control_metrics, Field, KeyOutcome, TextEdit};
16use crate::devtools::ProbedAny;
17use crate::reactive::Signal;
18use crate::theme::{theme, Size};
19
20/// Emitted as the value changes and when it's committed.
21#[derive(Debug, Clone)]
22pub enum AutocompleteEvent {
23    /// Every edit; carries the current text.
24    Change(String),
25    /// Enter or a suggestion click; carries the final text.
26    Commit(String),
27}
28
29/// Indices of suggestions matching `query` (case-insensitive substring).
30/// An empty query matches nothing — the list is a typing aid, not a menu.
31fn matches(suggestions: &[SharedString], query: &str) -> Vec<usize> {
32    if query.is_empty() {
33        return Vec::new();
34    }
35    let q = query.to_lowercase();
36    suggestions
37        .iter()
38        .enumerate()
39        .filter(|(_, s)| s.to_lowercase().contains(&q))
40        .map(|(i, _)| i)
41        .collect()
42}
43
44/// A text field with completion. Create with
45/// `cx.new(|cx| Autocomplete::new(cx).suggestions([..]))`.
46pub struct Autocomplete {
47    suggestions: Vec<SharedString>,
48    edit: TextEdit,
49    state: LineState,
50    open: bool,
51    highlight: usize,
52    max_shown: usize,
53    focus: FocusHandle,
54    placeholder: SharedString,
55    label: Option<SharedString>,
56    size: Size,
57    disabled: bool,
58}
59
60impl EventEmitter<AutocompleteEvent> for Autocomplete {}
61
62impl Autocomplete {
63    pub fn new(cx: &mut Context<Self>) -> Self {
64        Autocomplete {
65            suggestions: Vec::new(),
66            edit: TextEdit::new(""),
67            state: LineState::new(),
68            open: false,
69            highlight: 0,
70            max_shown: 8,
71            focus: cx.focus_handle().tab_stop(true),
72            placeholder: SharedString::new_static("Type…"),
73            label: None,
74            size: Size::Sm,
75            disabled: false,
76        }
77    }
78
79    pub fn suggestions<I, S>(mut self, suggestions: I) -> Self
80    where
81        I: IntoIterator<Item = S>,
82        S: Into<SharedString>,
83    {
84        self.suggestions = suggestions.into_iter().map(Into::into).collect();
85        self
86    }
87
88    pub fn value(mut self, value: impl Into<String>) -> Self {
89        self.edit = TextEdit::new(&value.into());
90        self
91    }
92
93    /// Cap the dropdown length (default 8).
94    pub fn max_shown(mut self, max: usize) -> Self {
95        self.max_shown = max.max(1);
96        self
97    }
98
99    pub fn placeholder(mut self, placeholder: impl Into<SharedString>) -> Self {
100        self.placeholder = placeholder.into();
101        self
102    }
103
104    pub fn label(mut self, label: impl Into<SharedString>) -> Self {
105        self.label = Some(label.into());
106        self
107    }
108
109    pub fn size(mut self, size: Size) -> Self {
110        self.size = size;
111        self
112    }
113
114    pub fn disabled(mut self, disabled: bool) -> Self {
115        self.disabled = disabled;
116        self
117    }
118
119    pub fn text(&self) -> String {
120        self.edit.text().to_string()
121    }
122
123    /// Two-way bind the text to a `Signal<String>`. The signal is the source
124    /// of truth; equality guards on both directions prevent loops.
125    pub fn bind(entity: &Entity<Autocomplete>, signal: &Signal<String>, cx: &mut App) {
126        let initial = signal.get(cx);
127        entity.update(cx, |this, cx| this.sync_text(initial, cx));
128        let sink = signal.clone();
129        cx.subscribe(entity, move |_this, event: &AutocompleteEvent, cx| {
130            if let AutocompleteEvent::Change(text) = event {
131                sink.set_if_changed(cx, text.clone());
132            }
133        })
134        .detach();
135        let field = entity.downgrade();
136        cx.observe(signal.entity(), move |observed, cx| {
137            let text = observed.read(cx).clone();
138            field.update(cx, |this, cx| this.sync_text(text, cx)).ok();
139        })
140        .detach();
141    }
142
143    fn sync_text(&mut self, text: String, cx: &mut Context<Self>) {
144        if self.edit.text() != text {
145            self.edit.set_text(&text);
146            cx.notify();
147        }
148    }
149
150    fn adopt(&mut self, index: usize, cx: &mut Context<Self>) {
151        if let Some(text) = self.suggestions.get(index).cloned() {
152            self.edit.set_text(text.as_ref());
153            self.open = false;
154            cx.emit(AutocompleteEvent::Change(text.to_string()));
155            cx.emit(AutocompleteEvent::Commit(text.to_string()));
156            cx.notify();
157        }
158    }
159
160    fn on_key(&mut self, event: &KeyDownEvent, window: &mut Window, cx: &mut Context<Self>) {
161        if self.disabled {
162            return;
163        }
164        let ks = &event.keystroke;
165        let shown = matches(&self.suggestions, &self.edit.text())
166            .len()
167            .min(self.max_shown);
168        // The list owns the vertical arrows and Enter; everything else is an
169        // ordinary text field.
170        if !ks.modifiers.platform && !ks.modifiers.control {
171            match ks.key.as_str() {
172                "escape" if self.open => {
173                    self.open = false;
174                    cx.notify();
175                    cx.stop_propagation();
176                    return;
177                }
178                "down" if self.open && shown > 0 => {
179                    self.highlight = (self.highlight + 1) % shown;
180                    cx.notify();
181                    cx.stop_propagation();
182                    return;
183                }
184                "up" if self.open && shown > 0 => {
185                    self.highlight = (self.highlight + shown - 1) % shown;
186                    cx.notify();
187                    cx.stop_propagation();
188                    return;
189                }
190                "enter" => {
191                    if self.open && shown > 0 {
192                        let target = matches(&self.suggestions, &self.edit.text())[self.highlight];
193                        self.adopt(target, cx);
194                    } else {
195                        self.open = false;
196                        cx.emit(AutocompleteEvent::Commit(self.text()));
197                    }
198                    cx.notify();
199                    cx.stop_propagation();
200                    return;
201                }
202                _ => {}
203            }
204        }
205        match line::keys(self, event, window, cx) {
206            KeyOutcome::Edited => {
207                self.line_changed(cx);
208                cx.stop_propagation();
209            }
210            KeyOutcome::Submit | KeyOutcome::Cancel | KeyOutcome::Pass => {}
211        }
212    }
213}
214
215impl LineEditor for Autocomplete {
216    fn edit(&self) -> &TextEdit {
217        &self.edit
218    }
219
220    fn edit_mut(&mut self) -> &mut TextEdit {
221        &mut self.edit
222    }
223
224    fn line(&self) -> &LineState {
225        &self.state
226    }
227
228    fn line_mut(&mut self) -> &mut LineState {
229        &mut self.state
230    }
231
232    fn line_focus(&self) -> &FocusHandle {
233        &self.focus
234    }
235
236    fn line_read_only(&self) -> bool {
237        self.disabled
238    }
239
240    /// Any edit reopens the list and starts the highlight over, since the
241    /// matches it was pointing at have changed.
242    fn line_changed(&mut self, cx: &mut Context<Self>) {
243        self.open = true;
244        self.highlight = 0;
245        cx.emit(AutocompleteEvent::Change(self.text()));
246        cx.notify();
247    }
248}
249
250line::line_input_handler!(Autocomplete);
251line::line_focus_builders!(Autocomplete);
252
253impl Render for Autocomplete {
254    fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
255        let t = theme(cx);
256        let (height, pad_x, font) = control_metrics(self.size);
257        let radius = t.radius(t.default_radius);
258        let focused = self.focus.is_focused(window) && !self.disabled;
259        let surface = t.surface().hsla();
260        let surface_hover = t.surface_hover().hsla();
261        let border = if focused { t.primary() } else { t.border() }.hsla();
262        let text_color = t.text().hsla();
263        let dimmed = t.dimmed().hsla();
264        let highlight_bg = t.primary().alpha(0.12);
265
266        let interior = Line::new(cx.entity()).placeholder(self.placeholder.clone(), dimmed);
267
268        let trigger = line::wire(div().id("guise-autocomplete-trigger"), &self.focus, cx)
269            .on_key_down(cx.listener(Self::on_key))
270            .flex()
271            .items_center()
272            .h(px(height))
273            .px(px(pad_x))
274            .rounded(px(radius))
275            .border_1()
276            .border_color(border)
277            .bg(surface)
278            .text_size(px(font))
279            .line_height(px(font * 1.3))
280            .child(div().flex_1().min_w(px(0.0)).child(interior));
281
282        let mut wrap = div().relative().child(trigger);
283
284        let shown = matches(&self.suggestions, &self.edit.text());
285        if self.open && focused && !shown.is_empty() {
286            let mut menu = div()
287                .absolute()
288                .top(px(height + 6.0))
289                .left(px(0.0))
290                .right(px(0.0))
291                .flex()
292                .flex_col()
293                .gap(px(2.0))
294                .p(px(4.0))
295                .rounded(px(radius))
296                .border_1()
297                .border_color(border)
298                .bg(surface)
299                .shadow_md()
300                .occlude();
301            for (row_ix, &option_ix) in shown.iter().take(self.max_shown).enumerate() {
302                let option = self.suggestions[option_ix].clone();
303                let mut row = div()
304                    .id(("guise-autocomplete-option", row_ix))
305                    .px(px(10.0))
306                    .py(px(6.0))
307                    .rounded(px(4.0))
308                    .text_size(px(font))
309                    .text_color(text_color)
310                    .child(option)
311                    .on_click(cx.listener(move |this, _ev, _window, cx| {
312                        this.adopt(option_ix, cx);
313                    }));
314                if row_ix == self.highlight {
315                    row = row.bg(highlight_bg);
316                } else {
317                    row = row.hover(move |s| s.bg(surface_hover));
318                }
319                menu = menu.child(row);
320            }
321            wrap = wrap.child(deferred(menu));
322        }
323
324        let mut chrome = Field::new().child(if self.disabled {
325            wrap.opacity(0.6)
326        } else {
327            wrap
328        });
329        if let Some(label) = self.label.clone() {
330            chrome = chrome.label(label);
331        }
332        chrome.probe_any("Autocomplete")
333    }
334}
335
336#[cfg(test)]
337mod tests {
338    use super::*;
339
340    fn suggestions() -> Vec<SharedString> {
341        ["Rust", "Ruby", "Python", "TypeScript"]
342            .into_iter()
343            .map(SharedString::new_static)
344            .collect()
345    }
346
347    #[test]
348    fn matching_is_substring_and_case_insensitive() {
349        let s = suggestions();
350        assert_eq!(matches(&s, "ru"), vec![0, 1]);
351        assert_eq!(matches(&s, "PY"), vec![2]);
352        assert_eq!(matches(&s, "script"), vec![3]);
353        assert_eq!(matches(&s, "zzz"), Vec::<usize>::new());
354    }
355
356    #[test]
357    fn empty_query_matches_nothing() {
358        assert_eq!(matches(&suggestions(), ""), Vec::<usize>::new());
359    }
360}
guise/input/autocomplete.rs

guise/input/
autocomplete.rs
