06c5c9dff3
The way the menu of the select was made was causing it to be cropped inside modals, it was due to the fact the menu was nested inside a position relative parent. Now we use react aria to position in full absolute the menu, making it to be correctly displayed inside modals.
58 lines
1.6 KiB
TypeScript
58 lines
1.6 KiB
TypeScript
import React, { PropsWithChildren } from "react";
|
|
import classNames from "classnames";
|
|
import { useOverlayPosition } from "react-aria";
|
|
import { SelectProps } from ":/components/Forms/Select/index";
|
|
import { SelectAuxProps } from ":/components/Forms/Select/mono-common";
|
|
import { SelectMultiAuxProps } from ":/components/Forms/Select/multi-common";
|
|
|
|
export interface SelectDropdownProps extends PropsWithChildren {
|
|
isOpen: boolean;
|
|
selectRef: React.RefObject<HTMLDivElement>;
|
|
menuOptionsStyle?: SelectProps["menuOptionsStyle"];
|
|
downshiftReturn:
|
|
| SelectAuxProps["downshiftReturn"]
|
|
| SelectMultiAuxProps["downshiftReturn"];
|
|
}
|
|
|
|
export const SelectMenu = ({
|
|
isOpen,
|
|
selectRef,
|
|
downshiftReturn,
|
|
menuOptionsStyle,
|
|
children,
|
|
}: SelectDropdownProps) => {
|
|
const menuRef = React.useRef<HTMLElement | null>(null);
|
|
const overlayPosition = useOverlayPosition({
|
|
targetRef: selectRef,
|
|
overlayRef: menuRef,
|
|
placement: "bottom",
|
|
isOpen,
|
|
maxHeight: 160,
|
|
shouldUpdatePosition: true,
|
|
});
|
|
const menuProps = downshiftReturn.getMenuProps({
|
|
ref: menuRef,
|
|
});
|
|
return (
|
|
<div
|
|
className={classNames(
|
|
"c__select__menu",
|
|
menuOptionsStyle ? "c__select__menu--" + menuOptionsStyle : "",
|
|
{
|
|
"c__select__menu--opened": isOpen,
|
|
},
|
|
)}
|
|
{...menuProps}
|
|
style={{
|
|
marginLeft: "-4px",
|
|
width: selectRef.current
|
|
? selectRef.current.getBoundingClientRect().width - 4
|
|
: 0,
|
|
...overlayPosition.overlayProps.style,
|
|
}}
|
|
>
|
|
{isOpen && children}
|
|
</div>
|
|
);
|
|
};
|