Select: Fixed z-index issue (#23786)

This commit is contained in:
Torkel Ödegaard
2020-04-22 16:18:22 +02:00
committed by GitHub
parent e8f4b46aae
commit 83608baf2f
@@ -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%',
}), }),
}} }}