diff --git a/src/components/Select/common/InternalSelect.tsx b/src/components/Select/common/InternalSelect.tsx index 9671a5fa..ea263ed2 100644 --- a/src/components/Select/common/InternalSelect.tsx +++ b/src/components/Select/common/InternalSelect.tsx @@ -127,6 +127,7 @@ export const InternalSelect = ({ container, useFullWidthItems = false, itemCharacterLimit = "64ch", + zIndex = "auto", ...props }: SelectContainerProps) => { const defaultId = useId(); @@ -391,6 +392,7 @@ export const InternalSelect = ({ align="start" $useFullWidthItems={useFullWidthItems} $itemCharacterLimit={itemCharacterLimit} + $zIndex={zIndex} > diff --git a/src/components/Select/common/SelectStyled.tsx b/src/components/Select/common/SelectStyled.tsx index a90a18ab..ab1c89b7 100644 --- a/src/components/Select/common/SelectStyled.tsx +++ b/src/components/Select/common/SelectStyled.tsx @@ -84,6 +84,7 @@ export const StyledSelectTrigger = styled(Trigger)<{ $error: boolean }>` export const SelectPopoverContent = styled(Content)<{ $useFullWidthItems: boolean; $itemCharacterLimit?: string; + $zIndex?: string; }>` width: var(--radix-popover-trigger-width); max-height: var(--radix-popover-content-available-height); @@ -114,6 +115,8 @@ export const SelectPopoverContent = styled(Content)<{ padding: 0.5rem 0rem; align-items: flex-start; gap: 0.625rem; + + z-index: ${({ $zIndex = "auto" }) => $zIndex}; `; export const SearchBarContainer = styled.div<{ $showSearch: boolean }>` diff --git a/src/components/Select/common/types.ts b/src/components/Select/common/types.ts index 9638ddf8..b29cef67 100644 --- a/src/components/Select/common/types.ts +++ b/src/components/Select/common/types.ts @@ -84,6 +84,7 @@ interface InternalSelectProps container?: HTMLElement; useFullWidthItems?: boolean; itemCharacterLimit?: string; + zIndex?: string; } export type SelectOptionProp = SelectOptionType | SelectChildrenType;