From 838ffe0a794ec7e9f16093e754cfd93150fb8a58 Mon Sep 17 00:00:00 2001
From: Floyd Wang <gassnake999@gmail.com>
Date: Wed, 28 May 2025 11:57:23 +0800
Subject: [PATCH] modal: Display overlay at the correct z-index (#909)

| Before | After |
| - | - |
| <img width="1712" alt="SCR-20250528-ksil"
src="https://github.com/user-attachments/assets/3725f142-0792-478a-ac7e-1a9c5604821a"
/> | <img width="1712" alt="SCR-20250528-krmi"
src="https://github.com/user-attachments/assets/b0fac5db-97b2-4ebd-83e2-94786950185c"
/> |
---
 crates/story/src/modal_story.rs |  2 +-
 crates/ui/src/modal.rs          |  2 +-
 crates/ui/src/root.rs           | 31 ++++++++++++++++++++-----------
 3 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/crates/story/src/modal_story.rs b/crates/story/src/modal_story.rs
index 85b13da6..f7f8cec4 100644
--- a/crates/story/src/modal_story.rs
+++ b/crates/story/src/modal_story.rs
@@ -144,7 +144,7 @@ impl ModalStory {
                                         modal
                                             .title("Other Modal")
                                             .child("This is another modal.")
-                                            .min_h(px(300.))
+                                            .min_h(px(100.))
                                             .overlay(overlay)
                                             .keyboard(keyboard)
                                             .show_close(modal_show_close)
diff --git a/crates/ui/src/modal.rs b/crates/ui/src/modal.rs
index c8e20c7d..96a22e3f 100644
--- a/crates/ui/src/modal.rs
+++ b/crates/ui/src/modal.rs
@@ -135,7 +135,7 @@ impl Modal {
             overlay: true,
             keyboard: true,
             layer_ix: 0,
-            overlay_visible: true,
+            overlay_visible: false,
             on_close: Rc::new(|_, _, _| {}),
             on_ok: None,
             on_cancel: Rc::new(|_, _, _| true),
diff --git a/crates/ui/src/root.rs b/crates/ui/src/root.rs
index 79cab16f..2eab9e44 100644
--- a/crates/ui/src/root.rs
+++ b/crates/ui/src/root.rs
@@ -356,35 +356,44 @@ impl Root {
         let root = window.root::<Root>()??;
 
         let active_modals = root.read(cx).active_modals.clone();
-        let mut has_overlay = false;
 
         if active_modals.is_empty() {
             return None;
         }
 
-        Some(
-            div().children(active_modals.iter().enumerate().map(|(i, active_modal)| {
+        let mut show_overlay_ix = None;
+
+        let mut modals = active_modals
+            .iter()
+            .enumerate()
+            .map(|(i, active_modal)| {
                 let mut modal = Modal::new(window, cx);
 
                 modal = (active_modal.builder)(modal, window, cx);
-                modal.layer_ix = i;
+
                 // Give the modal the focus handle, because `modal` is a temporary value, is not possible to
                 // keep the focus handle in the modal.
                 //
                 // So we keep the focus handle in the `active_modal`, this is owned by the `Root`.
                 modal.focus_handle = active_modal.focus_handle.clone();
 
-                // Keep only have one overlay, we only render the first modal with overlay.
-                if has_overlay {
-                    modal.overlay_visible = false;
-                }
+                modal.layer_ix = i;
+                // Find the modal which one needs to show overlay.
                 if modal.has_overlay() {
-                    has_overlay = true;
+                    show_overlay_ix = Some(i);
                 }
 
                 modal
-            })),
-        )
+            })
+            .collect::<Vec<_>>();
+
+        if let Some(ix) = show_overlay_ix {
+            if let Some(modal) = modals.get_mut(ix) {
+                modal.overlay_visible = true;
+            }
+        }
+
+        Some(div().children(modals))
     }
 
     /// Return the root view of the Root.