Select: Fixed z-index issue (#23786)

packages/grafana-ui/src/components/Select/SelectBase.tsx

@@ -321,6 +321,9 @@ export function SelectBase<T>({
         }}
         }}
         styles={{
         styles={{
           ...resetSelectStyles(),
           ...resetSelectStyles(),
+          menuPortal: () => ({
+            zIndex: theme.zIndex.dropdown,
+          }),
           //These are required for the menu positioning to function
           //These are required for the menu positioning to function
           menu: ({ top, bottom, width, position }: any) => ({
           menu: ({ top, bottom, width, position }: any) => ({
             top,
             top,
@@ -328,12 +331,10 @@ export function SelectBase<T>({
             width,
             width,
             position,
             position,
             marginBottom: !!bottom ? '10px' : '0',
             marginBottom: !!bottom ? '10px' : '0',
-            zIndex: 9999,
+            zIndex: theme.zIndex.dropdown,
           }),
           }),
           container: () => ({
           container: () => ({
             position: 'relative',
             position: 'relative',
-            // This puts the menu above Inputs (z-index: 1)
-            zIndex: theme.zIndex.dropdown,
             width: width ? `${8 * width}px` : '100%',
             width: width ? `${8 * width}px` : '100%',
           }),
           }),
         }}
         }}