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

fix: outsideClickDetector not working on the date dropdown (#3450)

Browse Source
This commit is contained in:
Aaryan Khandelwal 2024-01-24 19:13:38 +05:30 committed by GitHub
parent 87f39d7372
commit 81f84f24f7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 8 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
web/components/dropdowns/date.tsx
View File

@ -1,5 +1,5 @@
import React, { useRef, useState } from "react"; import React, { useRef, useState } from "react";
import { Popover } from "@headlessui/react"; import { Combobox } from "@headlessui/react";
import DatePicker from "react-datepicker"; import DatePicker from "react-datepicker";
import { usePopper } from "react-popper"; import { usePopper } from "react-popper";
import { CalendarDays, X } from "lucide-react"; import { CalendarDays, X } from "lucide-react";
@ -153,13 +153,14 @@ export const DateDropdown: React.FC<Props> = (props) => {
useOutsideClickDetector(dropdownRef, closeDropdown); useOutsideClickDetector(dropdownRef, closeDropdown);
return ( return (
<Popover <Combobox
as="div"
ref={dropdownRef} ref={dropdownRef}
tabIndex={tabIndex} tabIndex={tabIndex}
className={cn("h-full flex-shrink-0", className)} className={cn("h-full flex-shrink-0", className)}
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
> >
<Popover.Button as={React.Fragment}> <Combobox.Button as={React.Fragment}>
<button <button
ref={setReferenceElement} ref={setReferenceElement}
type="button" type="button"
@ -232,9 +233,9 @@ export const DateDropdown: React.FC<Props> = (props) => {
/> />
) : null} ) : null}
</button> </button>
</Popover.Button> </Combobox.Button>
{isOpen && ( {isOpen && (
<Popover.Panel className="fixed z-10" static> <Combobox.Options className="fixed z-10" static>
<div className="my-1" ref={setPopperElement} style={styles.popper} {...attributes.popper}> <div className="my-1" ref={setPopperElement} style={styles.popper} {...attributes.popper}>
<DatePicker <DatePicker
selected={value ? new Date(value) : null} selected={value ? new Date(value) : null}
@ -249,8 +250,8 @@ export const DateDropdown: React.FC<Props> = (props) => {
inline inline
/> />
</div> </div>
</Popover.Panel> </Combobox.Options>
)} )}
</Popover> </Combobox>
); );
}; };