thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

chore: disable scroll when dropdown is opened

Browse Source
This commit is contained in:
Aaryan Khandelwal 2023-08-21 16:38:50 +05:30
parent 81710e97cc
commit 21e24acb40
1 changed files with 11 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
apps/app/components/ui/dropdowns/custom-search-select.tsx
View File

@ -51,9 +51,8 @@ export const CustomSearchSelect = ({
}: CustomSearchSelectProps) => { }: CustomSearchSelectProps) => {
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const dropdownContainer = useRef<any>(null);
const dropdownOptions = useRef<any>(null);
const dropdownBtn = useRef<any>(null); const dropdownBtn = useRef<any>(null);
const dropdownOptions = useRef<any>(null);
const [query, setQuery] = useState(""); const [query, setQuery] = useState("");
@ -71,16 +70,17 @@ export const CustomSearchSelect = ({
if (multiple) props.multiple = true; if (multiple) props.multiple = true;
const handleOnOpen = () => { const handleOnOpen = () => {
const dropdownContainerRef = dropdownContainer.current;
const dropdownOptionsRef = dropdownOptions.current; const dropdownOptionsRef = dropdownOptions.current;
const dropdownBtnRef = dropdownBtn.current; const dropdownBtnRef = dropdownBtn.current;
const dropdownWidth = dropdownOptionsRef?.clientWidth || 225; if (!dropdownOptionsRef || !dropdownBtnRef) return;
const dropdownHeight = dropdownOptionsRef?.clientHeight || 206;
const dropdownBtnX = dropdownBtnRef.getBoundingClientRect().x || 0; const dropdownWidth = dropdownOptionsRef.clientWidth;
const dropdownBtnY = dropdownBtnRef.getBoundingClientRect().y || 0; const dropdownHeight = dropdownOptionsRef.clientHeight;
const dropdownBtnHeight = dropdownBtnRef?.clientHeight || 32;
const dropdownBtnX = dropdownBtnRef.getBoundingClientRect().x;
const dropdownBtnY = dropdownBtnRef.getBoundingClientRect().y;
const dropdownBtnHeight = dropdownBtnRef.clientHeight;
let top = dropdownBtnY + dropdownBtnHeight; let top = dropdownBtnY + dropdownBtnHeight;
if (dropdownBtnY + dropdownHeight > window.innerHeight) if (dropdownBtnY + dropdownHeight > window.innerHeight)
@ -89,10 +89,8 @@ export const CustomSearchSelect = ({
let left = dropdownBtnX; let left = dropdownBtnX;
if (dropdownBtnX + dropdownWidth > window.innerWidth) left = dropdownBtnX - dropdownWidth; if (dropdownBtnX + dropdownWidth > window.innerWidth) left = dropdownBtnX - dropdownWidth;
if (dropdownContainerRef) { dropdownOptionsRef.style.top = `${Math.round(top)}px`;
dropdownContainerRef.style.top = `${Math.round(top)}px`; dropdownOptionsRef.style.left = `${Math.round(left)}px`;
dropdownContainerRef.style.left = `${Math.round(left)}px`;
}
}; };
useOutsideClickDetector(dropdownOptions, () => { useOutsideClickDetector(dropdownOptions, () => {
@ -141,7 +139,7 @@ export const CustomSearchSelect = ({
leaveFrom="opacity-100 translate-y-0" leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1" leaveTo="opacity-0 translate-y-1"
> >
<div ref={dropdownContainer} className={`fixed z-20 h-full w-full`}> <div className="fixed z-20 top-0 left-0 h-full w-full cursor-auto">
<Combobox.Options <Combobox.Options
ref={dropdownOptions} ref={dropdownOptions}
className={`fixed z-10 min-w-[10rem] border border-custom-border-300 p-2 rounded-md bg-custom-background-90 text-xs shadow-lg focus:outline-none ${ className={`fixed z-10 min-w-[10rem] border border-custom-border-300 p-2 rounded-md bg-custom-background-90 text-xs shadow-lg focus:outline-none ${