fix(field): isolate stacking context (#497)

tyler-technologies-oss · Mar 14, 2024 · 17e417b · 17e417b
1 parent bbb3d1a
commit 17e417b
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 11 deletions.
diff --git a/src/lib/field-next/_core.layout.scss b/src/lib/field-next/_core.layout.scss
@@ -146,19 +146,15 @@ $resize-container-input-padding-block-end-base: 8px;
   resize: #{token(multiline-resize)};
 }
 
-@mixin resize-container-inset-input {
-  z-index: unset;
-}
-
 @mixin resize-container-inset-label {
-  z-index: 9999;
+  z-index: 2;
   pointer-events: none;
   inline-size: fit-content;
 }
 
 @mixin resize-container-inset-label-slot {
   display: block;
-  z-index: 9999;
+  z-index: 1;
 }
 
 @mixin resize-container-inset-label-background {

diff --git a/src/lib/field-next/_core.scss b/src/lib/field-next/_core.scss
@@ -21,6 +21,7 @@
 
   display: grid;
   position: relative;
+  isolation: isolate;
 }
 
 @mixin field-disabled {
@@ -72,7 +73,7 @@
   grid-area: center;
 
   // z-index is set to ensure the input is never rendered unclickable by the inset label
-  z-index: 9999;
+  z-index: 1;
 
   block-size: 100%;
   inline-size: 100%;

diff --git a/src/lib/field-next/field.scss b/src/lib/field-next/field.scss
@@ -491,10 +491,6 @@ $variants: (
       @include core.resize-container-inset-label-background;
     }
   }
-
-  .input {
-    @include core.resize-container-inset-input;
-  }
 }
 
 //
-Original file line number
+Diff line change
@@ Expand Up / @@ -491,10 +491,6 @@ $variants: ( @@
           @include core.resize-container-inset-label-background;
         }
       }
-      .input {
-        @include core.resize-container-inset-input;
-      }
     }
     //
@@ Expand Down @@