fix(island-ui): Phone input z-indices stacking (#16875)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
island-is · Nov 22, 2024 · 1805590 · 1805590
1 parent 6f0354c
commit 1805590
Show file tree

Hide file tree

Showing 3 changed files with 2 additions and 3 deletions.
diff --git a/libs/island-ui/core/src/lib/PhoneInput/CountryCodeSelect/Components/index.tsx b/libs/island-ui/core/src/lib/PhoneInput/CountryCodeSelect/Components/index.tsx
@@ -242,7 +242,6 @@ export const customStyles = (): StylesConfig<
     left: 0,
     width: '100%',
     height: '100%',
-    zIndex: 1,
   }),
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore make web strict

diff --git a/libs/island-ui/core/src/lib/PhoneInput/CountryCodeSelect/CountryCodeSelect.css.ts b/libs/island-ui/core/src/lib/PhoneInput/CountryCodeSelect/CountryCodeSelect.css.ts
@@ -292,6 +292,7 @@ export const dropdownIndicator = style(
 )
 export const menu = style(
   {
+    zIndex: theme.zIndex.belowModal,
     marginTop: -3,
     borderTopLeftRadius: 0,
     borderTopRightRadius: 0,

diff --git a/libs/island-ui/core/src/lib/PhoneInput/PhoneInput.css.ts b/libs/island-ui/core/src/lib/PhoneInput/PhoneInput.css.ts
@@ -33,7 +33,7 @@ export const containerSizes = styleVariants(inputMixins.containerSizes)
 export const input = recipe({
   base: {
     ...inputMixins.input,
-    zIndex: 2,
+    position: 'relative',
     marginLeft: '120px',
     '::placeholder': inputMixins.inputPlaceholder,
     ':focus': inputMixins.inputFocus,
@@ -118,7 +118,6 @@ export const hasError = style({
 export const label = recipe({
   base: {
     ...inputMixins.label,
-    zIndex: 2,
     position: 'relative',
     selectors: {
       [`${hasError} &`]: inputMixins.labelErrorState,