From e8bc8815a9b2e1252bfc3df3b2d4e7a414159b68 Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Thu, 9 Oct 2025 19:55:47 +0500
Subject: [PATCH] [Fix]: #1290 add zindex property for stacking issue

---
 .../packages/lowcoder/src/comps/hooks/drawerComp.tsx   |  8 ++++++--
 client/packages/lowcoder/src/comps/hooks/modalComp.tsx | 10 +++++++---
 client/packages/lowcoder/src/i18n/locales/en.ts        |  3 ++-
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/hooks/drawerComp.tsx b/client/packages/lowcoder/src/comps/hooks/drawerComp.tsx
index 3b33c3fb9..42a7d392f 100644
--- a/client/packages/lowcoder/src/comps/hooks/drawerComp.tsx
+++ b/client/packages/lowcoder/src/comps/hooks/drawerComp.tsx
@@ -4,7 +4,7 @@ import { ContainerCompBuilder } from "comps/comps/containerBase/containerCompBui
 import { gridItemCompToGridItems, InnerGrid } from "comps/comps/containerComp/containerView";
 import { AutoHeightControl } from "comps/controls/autoHeightControl";
 import { BoolControl } from "comps/controls/boolControl";
-import { StringControl } from "comps/controls/codeControl";
+import { StringControl, NumberControl } from "comps/controls/codeControl";
 import { booleanExposingStateControl } from "comps/controls/codeStateControl";
 import { PositionControl, LeftRightControl, HorizontalAlignmentControl } from "comps/controls/dropdownControl";
 import { eventHandlerControl } from "comps/controls/eventHandlerControl";
@@ -122,6 +122,7 @@ const childrenMap = {
   showMask: withDefault(BoolControl, true),
   toggleClose:withDefault(BoolControl,true),
   escapeClosable: withDefault(BoolControl, true),
+  zIndex: withDefault(NumberControl, Layers.drawer),
 };
 
 type ChildrenType = NewChildren<RecordConstructorToComp<typeof childrenMap>> & {
@@ -168,6 +169,9 @@ const DrawerPropertyView = React.memo((props: {
       {props.children.escapeClosable.propertyView({
         label: trans("prop.escapeClose"),
       })}
+      {props.children.zIndex.propertyView({
+        label: trans("prop.zIndex"),
+      })}
     </Section>
     <Section name={sectionNames.interaction}>{props.children.onEvent.getPropertyView()}</Section>
     <Section name={sectionNames.style}>{props.children.style.getPropertyView()}</Section>
@@ -251,7 +255,7 @@ const DrawerView = React.memo((
           height={!props.autoHeight ? transToPxSize(props.height || DEFAULT_SIZE) : ""}
           onClose={onClose}
           afterOpenChange={afterOpenChange}
-          zIndex={Layers.drawer}
+          zIndex={props.zIndex}
           maskClosable={props.maskClosable}
           mask={true}
           className={clsx(`app-${appID}`, props.className)}
diff --git a/client/packages/lowcoder/src/comps/hooks/modalComp.tsx b/client/packages/lowcoder/src/comps/hooks/modalComp.tsx
index 933495b5f..cf898ff1a 100644
--- a/client/packages/lowcoder/src/comps/hooks/modalComp.tsx
+++ b/client/packages/lowcoder/src/comps/hooks/modalComp.tsx
@@ -1,7 +1,7 @@
 import { ContainerCompBuilder } from "comps/comps/containerBase/containerCompBuilder";
 import { gridItemCompToGridItems, InnerGrid } from "comps/comps/containerComp/containerView";
 import { AutoHeightControl } from "comps/controls/autoHeightControl";
-import { StringControl } from "comps/controls/codeControl";
+import { StringControl, NumberControl } from "comps/controls/codeControl";
 import { booleanExposingStateControl } from "comps/controls/codeStateControl";
 import { eventHandlerControl } from "comps/controls/eventHandlerControl";
 import { styleControl } from "comps/controls/styleControl";
@@ -117,7 +117,8 @@ const childrenMap = {
   style: styleControl(ModalStyle),
   maskClosable: withDefault(BoolControl, true),
   showMask: withDefault(BoolControl, true),
-  toggleClose:withDefault(BoolControl,true)
+  toggleClose:withDefault(BoolControl,true),
+  zIndex: withDefault(NumberControl, Layers.modal)
 };
 
 const ModalPropertyView = React.memo((props: {
@@ -156,6 +157,9 @@ const ModalPropertyView = React.memo((props: {
       {props.children.toggleClose.propertyView({
         label: trans("prop.toggleClose"),
       })}
+      {props.children.zIndex.propertyView({
+        label: trans("prop.zIndex"),
+      })}
     </Section>
     <Section name={sectionNames.interaction}>{props.children.onEvent.getPropertyView()}</Section>
     <Section name={sectionNames.style}>{props.children.style.getPropertyView()}</Section>
@@ -278,7 +282,7 @@ const ModalView = React.memo((
           onCancel={handleCancel}
           afterClose={handleAfterClose}
           afterOpenChange={handleAfterOpenChange}
-          zIndex={Layers.modal}
+          zIndex={props.zIndex}
           modalRender={modalRender}
           mask={props.showMask}
           className={clsx(`app-${appID}`, props.className)}
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
index 60095c146..18e71b23c 100644
--- a/client/packages/lowcoder/src/i18n/locales/en.ts
+++ b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -237,7 +237,8 @@ export const en = {
     "timeZone": "TimeZone",
     "pickerMode": "Picker Mode",
     "customTags": "Allow Custom Tags",
-    "customTagsTooltip": "Allow users to enter custom tags that are not in the options list."
+    "customTagsTooltip": "Allow users to enter custom tags that are not in the options list.",
+    "zIndex": "z-Index"
   },
   "autoHeightProp": {
     "auto": "Auto",