Select: allow setting a z-index of the content popover

ClickHouse · Dec 17, 2024 · 4916620 · 4916620
1 parent 34ee5df
commit 4916620
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 0 deletions.
diff --git 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}
             >
               <SelectList>
                 <SearchBarContainer $showSearch={showSearch}>

diff --git 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
@@ -84,6 +84,7 @@ interface InternalSelectProps
   container?: HTMLElement;
   useFullWidthItems?: boolean;
   itemCharacterLimit?: string;
+  zIndex?: string;
 }
 
 export type SelectOptionProp = SelectOptionType | SelectChildrenType;