Add keyboard support for Picker.

README.md

@@ -26,6 +26,9 @@ https://github.com/huacnlee/gpui-app/assets/5518/ad103f02-697a-40ed-a876-8b13e42
 - [ ] Radio & RadioGroup
 - [ ] Dropdown
   - [ ] Combobox
+  - [ ] Picker
+    - [x] Picker List
+    - [x] Use keyword to select next, prev, enter to select, esc to cancel.
 - [x] Tabs
   - [x] Tab
   - [x] TabBar

crates/ui/src/picker.rs

@@ -3,11 +3,10 @@ use std::time::Duration;
 use anyhow::Result;
 use gpui::{
     actions, div, list, prelude::FluentBuilder as _, px, rems, uniform_list, AppContext,
-    ClickEvent, DismissEvent, Div, EventEmitter, FocusHandle, FocusableView,
+    ClickEvent, DismissEvent, Div, EventEmitter, FocusHandle, FocusableView, InteractiveElement,
-    InteractiveElement as _, IntoElement, Length, ListSizingBehavior, ListState, MouseButton,
+    IntoElement, Length, ListSizingBehavior, ListState, MouseButton, MouseUpEvent,
-    MouseUpEvent, ParentElement as _, Render, SharedString, StatefulInteractiveElement as _,
+    ParentElement as _, Render, SharedString, StatefulInteractiveElement as _, Styled as _, Task,
-    Styled as _, Task, UniformListScrollHandle, View, ViewContext, VisualContext as _,
+    UniformListScrollHandle, View, ViewContext, VisualContext as _, WindowContext,
-    WindowContext,
 };
 
 actions!(
@@ -486,5 +485,23 @@ impl<D: PickerDelegate> Render for Picker<D> {
                         .child(div().child(Label::new("No matched.").text_color(cx.theme().muted))),
                 )
             })
+            .on_key_down(cx.listener(|this, ev: &gpui::KeyDownEvent, cx| {
+                let key = ev.keystroke.key.as_str();
+                match key {
+                    "escape" => {
+                        this.cancel(&Cancel, cx);
+                    }
+                    "enter" => {
+                        this.confirm(&Confirm, cx);
+                    }
+                    "down" => {
+                        this.select_next(&SelectNext, cx);
+                    }
+                    "up" => {
+                        this.select_prev(&SelectPrev, cx);
+                    }
+                    _ => {}
+                }
+            }))
     }
 }