Use Element to paint DropdownMenu to fix layer priority.

crates/ui-story/src/lib.rs

@@ -5,7 +5,7 @@ mod input_story;
 mod picker_story;
 mod popover_story;
 mod switch_story;
-mod tooltip_stroy;
+mod tooltip_story;
 
 use gpui::{
     div, prelude::FluentBuilder as _, px, AnyElement, IntoElement, ParentElement, Render,
@@ -28,7 +28,7 @@ use input_story::InputStory;
 use picker_story::PickerStory;
 use popover_story::PopoverStory;
 use switch_story::SwitchStory;
-use tooltip_stroy::TooltipStory;
+use tooltip_story::TooltipStory;
 
 pub fn story_case(name: &'static str, description: &'static str) -> StoryContainer {
     StoryContainer::new(name, description)

crates/ui-story/src/popover_story.rs

@@ -25,6 +25,7 @@ impl Render for PopoverStory {
         )
         .child(
             h_flex().items_center().justify_between().child(
+               v_flex().gap_4().child( 
                 Popover::new("info-top-left")
                     .trigger(Button::new("info", "Top Left").width(px(300.)))
                     .content(|cx| {
@@ -39,7 +40,8 @@ impl Render for PopoverStory {
                             },
                             cx,
                         )
-                    }),
+                    })
+            ).child("This is background text, should be covered by Popover.")
             ).child(
                 Popover::new("info-top-right")
                 .trigger(Button::new("info", "Top Right").width(px(300.)))

crates/ui/src/dropdown.rs

@@ -1,8 +1,9 @@
 use gpui::{
-    actions, div, prelude::FluentBuilder as _, px, AppContext, ElementId, FocusHandle,
+    actions, deferred, div, prelude::FluentBuilder as _, px, AnyElement, AppContext, DismissEvent,
-    FocusableView, InteractiveElement, IntoElement, KeyBinding, ParentElement as _, Render,
+    Element, ElementId, EventEmitter, FocusHandle, FocusableView, InteractiveElement, IntoElement,
-    SharedString, StatefulInteractiveElement as _, Styled as _, View, ViewContext,
+    KeyBinding, LayoutId, ParentElement as _, Render, SharedString,
-    VisualContext as _, WeakView,
+    StatefulInteractiveElement as _, Styled as _, View, ViewContext, VisualContext as _, WeakView,
+    WindowContext,
 };
 
 actions!(dropdown, [Up, Down, Enter, Escape]);
@@ -172,6 +173,9 @@ where
         if !self.open {
             self.open = true;
             cx.notify();
+        } else {
+            self.picker.focus_handle(cx).focus(cx);
+            cx.dispatch_action(Box::new(picker::Confirm));
         }
     }
 
@@ -179,8 +183,25 @@ where
         self.open = false;
         cx.notify();
     }
+
+    fn render_menu_content(&self, cx: &WindowContext) -> impl IntoElement {
+        div()
+            .absolute()
+            .mt_1p5()
+            .bg(cx.theme().background)
+            .border_1()
+            .border_color(cx.theme().input)
+            .rounded(px(cx.theme().radius))
+            .shadow_md()
+            .track_focus(&self.picker.focus_handle(cx))
+            .child(self.picker.clone())
+            .on_mouse_down_out(|_, cx| {
+                cx.dispatch_action(Box::new(Escape));
+            })
+    }
 }
 
+impl<D> EventEmitter<DismissEvent> for Dropdown<D> where D: DropdownDelegate + 'static {}
 impl<D> FocusableView for Dropdown<D>
 where
     D: DropdownDelegate + 'static,
@@ -242,23 +263,118 @@ where
                             ),
                     ),
             )
-            .when(self.open, |this| {
+            .child(DropdownMenuElement {
-                this.child(
+                id: "dropdown-menu".into(),
-                    div()
+                dropdown: cx.view().clone(),
-                        .absolute()
-                        .mt_1p5()
-                        .bg(cx.theme().background)
-                        .border_1()
-                        .border_color(cx.theme().input)
-                        .rounded(px(cx.theme().radius))
-                        .shadow_md()
-                        .track_focus(&self.picker.focus_handle(cx))
-                        .child(self.picker.clone())
-                        .on_mouse_down_out(cx.listener(|view, _, cx| {
-                            view.open = false;
-                            cx.notify();
-                        })),
-                )
             })
     }
 }
+
+struct DropdownMenuElement<D: DropdownDelegate + 'static> {
+    id: ElementId,
+    dropdown: View<Dropdown<D>>,
+}
+
+struct DropdownMenuElementState {
+    menu_element: Option<AnyElement>,
+    layout_id: Option<LayoutId>,
+}
+
+impl Default for DropdownMenuElementState {
+    fn default() -> Self {
+        Self {
+            menu_element: None,
+            layout_id: None,
+        }
+    }
+}
+
+impl<D> IntoElement for DropdownMenuElement<D>
+where
+    D: DropdownDelegate + 'static,
+{
+    type Element = Self;
+
+    fn into_element(self) -> Self::Element {
+        self
+    }
+}
+
+impl<D> Element for DropdownMenuElement<D>
+where
+    D: DropdownDelegate + 'static,
+{
+    type RequestLayoutState = DropdownMenuElementState;
+
+    type PrepaintState = ();
+
+    fn id(&self) -> Option<ElementId> {
+        Some(self.id.clone())
+    }
+
+    fn request_layout(
+        &mut self,
+        id: Option<&gpui::GlobalElementId>,
+        cx: &mut gpui::WindowContext,
+    ) -> (gpui::LayoutId, Self::RequestLayoutState) {
+        cx.with_element_state(
+            id.unwrap(),
+            |element_state: Option<DropdownMenuElementState>, cx| {
+                let state = element_state.unwrap_or_default();
+
+                let menu = self
+                    .dropdown
+                    .read(cx)
+                    .render_menu_content(cx)
+                    .into_any_element();
+
+                let mut element = deferred(menu).with_priority(1).into_any();
+                let layout_id = element.request_layout(cx);
+                (
+                    (
+                        layout_id.clone(),
+                        DropdownMenuElementState {
+                            layout_id: Some(layout_id),
+                            menu_element: Some(element),
+                        },
+                    ),
+                    state,
+                )
+            },
+        )
+    }
+
+    fn prepaint(
+        &mut self,
+        _: Option<&gpui::GlobalElementId>,
+        _: gpui::Bounds<gpui::Pixels>,
+        request_layout: &mut DropdownMenuElementState,
+        cx: &mut gpui::WindowContext,
+    ) -> Self::PrepaintState {
+        if self.dropdown.read(cx).open {
+            if let Some(element) = &mut request_layout.menu_element {
+                element.prepaint(cx);
+            }
+
+            if let Some(layout_id) = request_layout.layout_id {
+                let bounds = cx.layout_bounds(layout_id);
+                cx.insert_hitbox(bounds, false);
+            }
+        }
+    }
+
+    fn paint(
+        &mut self,
+        _: Option<&gpui::GlobalElementId>,
+        _: gpui::Bounds<gpui::Pixels>,
+        request_layout: &mut Self::RequestLayoutState,
+        _: &mut Self::PrepaintState,
+        cx: &mut gpui::WindowContext,
+    ) {
+        if self.dropdown.read(cx).open {
+            if let Some(element) = &mut request_layout.menu_element {
+                element.paint(cx);
+            }
+        }
+    }
+}

crates/ui/src/popover.rs

@@ -145,13 +145,14 @@ impl<M: ManagedView> Popover<M> {
         cx.refresh();
     }
 
-    fn resolved_attach(&self) -> AnchorCorner {
+    fn resolved_corner(&self, bounds: Bounds<Pixels>) -> Point<Pixels> {
         match self.anchor {
             AnchorCorner::TopLeft => AnchorCorner::BottomLeft,
             AnchorCorner::TopRight => AnchorCorner::BottomRight,
             AnchorCorner::BottomLeft => AnchorCorner::TopLeft,
             AnchorCorner::BottomRight => AnchorCorner::TopRight,
         }
+        .corner(bounds)
     }
 
     fn resolved_offset(&self, _cx: &WindowContext) -> Point<Pixels> {
@@ -223,8 +224,7 @@ impl<M: ManagedView> Element for Popover<M> {
                     let mut anchored = anchored().snap_to_window().anchor(self.anchor);
                     if let Some(trigger_bounds) = element_state.trigger_bounds {
                         anchored = anchored.position(
-                            self.resolved_attach().corner(trigger_bounds)
+                            self.resolved_corner(trigger_bounds) + self.resolved_offset(cx),
-                                + self.resolved_offset(cx),
                         );
                     }
                     let mut element = deferred(anchored.child(popover.clone()))