diff --git a/Parts/DropDown.tsx b/Parts/DropDown.tsx index 70b1fef..08fc808 100644 --- a/Parts/DropDown.tsx +++ b/Parts/DropDown.tsx @@ -1,6 +1,7 @@ import React, { cloneElement, isValidElement, useEffect, useImperativeHandle, useRef, useState } from "react"; import { createPopper, Placement } from "@popperjs/core"; import { usePopper } from 'react-popper'; +import { Portal } from "@mantine/core"; import styled from "styled-components"; import tw from "twin.macro" @@ -118,22 +119,26 @@ let Dropdown = React.forwardRef(({ children, dropdownCss = null, onValueChanged {button} - {dropdownPopoverShow &&
{ setOverDropDown(true); hover && await openDropdownPopover() }} - onMouseLeave={() => { setOverDropDown(false); (!overButton && hover) && closeDropdownPopover() }} - style={styles.popper} - {...attributes.popper} - css={[ - dropdownPopoverShow ? tw`block` : tw`hidden`, - tw`bg-trinary text-base z-50 float-left rounded-xl overflow-hidden text-left shadow-lg`, - dropdownCss, - (props as any).css - ]} - > - {childrenWithProps} -
} + {dropdownPopoverShow && ( + +
{ setOverDropDown(true); hover && await openDropdownPopover(); }} + onMouseLeave={() => { setOverDropDown(false); (!overButton && hover) && closeDropdownPopover(); }} + style={{ ...styles.popper, zIndex: 99999 }} + {...attributes.popper} + css={[ + dropdownPopoverShow ? tw`block` : tw`hidden`, + tw`bg-trinary text-base float-left rounded-xl overflow-hidden text-left shadow-2xl border border-secondary`, + dropdownCss, + (props as any).css + ]} + > + {childrenWithProps} +
+
+ )} );