github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: updated tab navigation logic in the issue modal

Browse Source
This commit is contained in:
gurusainath 2024-03-21 16:02:27 +05:30
parent 3503f50572
commit 3d3bd3f804
10 changed files with 182 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
web/components/dropdowns/cycle/index.tsx
View File

@ -1,4 +1,4 @@
import { Fragment, ReactNode, useRef, useState } from "react";
import { Fragment, ReactNode, useEffect, useRef, useState } from "react";
import { observer } from "mobx-react-lite";
import { ChevronDown } from "lucide-react";
import { Combobox } from "@headlessui/react";
@ -8,7 +8,6 @@ import { cn } from "@/helpers/common.helper";
import { useCycle } from "@/hooks/store";
import { useDropdownKeyDown } from "@/hooks/use-dropdown-key-down";
import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
import useOutsideKeydownDetector from "@/hooks/use-outside-keydown-detector";
// components
import { DropdownButton } from "../buttons";
// icons
@ -24,6 +23,8 @@ type Props = TDropdownProps & {
dropdownArrow?: boolean;
dropdownArrowClassName?: string;
onChange: (val: string | null) => void;
isDropdownOpened?: boolean;
onOpen?: () => void;
onClose?: () => void;
projectId: string;
value: string | null;
@ -41,6 +42,8 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
dropdownArrowClassName = "",
hideIcon = false,
onChange,
isDropdownOpened,
onOpen: onDropdownOpen,
onClose,
placeholder = "Cycle",
placement,
@ -68,6 +71,7 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
const toggleDropdown = () => {
setIsOpen((prevIsOpen) => !prevIsOpen);
if (!isOpen) onDropdownOpen && onDropdownOpen();
if (isOpen) onClose && onClose();
};
@ -85,7 +89,13 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
};
useOutsideClickDetector(dropdownRef, handleClose);
useOutsideKeydownDetector(dropdownRef, handleClose);
useEffect(() => {
if (isDropdownOpened && !isOpen) setIsOpen(true);
}, [isDropdownOpened, isOpen]);
useEffect(() => {
if (isDropdownOpened === false) setIsOpen(false);
}, [isDropdownOpened]);
return (
<Combobox

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

@ -1,4 +1,4 @@
import React, { useRef, useState } from "react";
import React, { useEffect, useRef, useState } from "react";
import { DayPicker, Matcher } from "react-day-picker";
import { usePopper } from "react-popper";
import { CalendarDays, X } from "lucide-react";
@ -9,7 +9,6 @@ import { renderFormattedDate, getDate } from "@/helpers/date-time.helper";
// hooks
import { useDropdownKeyDown } from "@/hooks/use-dropdown-key-down";
import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
import useOutsideKeydownDetector from "@/hooks/use-outside-keydown-detector";
// components
import { DropdownButton } from "./buttons";
// types
@ -24,6 +23,8 @@ type Props = TDropdownProps & {
minDate?: Date;
maxDate?: Date;
onChange: (val: Date | null) => void;
isDropdownOpened?: boolean;
onOpen?: () => void;
onClose?: () => void;
value: Date | string | null;
closeOnSelect?: boolean;
@ -44,6 +45,8 @@ export const DateDropdown: React.FC<Props> = (props) => {
minDate,
maxDate,
onChange,
isDropdownOpened,
onOpen: onDropdownOpen,
onClose,
placeholder = "Date",
placement,
@ -85,7 +88,10 @@ export const DateDropdown: React.FC<Props> = (props) => {
};
const toggleDropdown = () => {
if (!isOpen) onOpen();
if (!isOpen) {
onOpen();
onDropdownOpen && onDropdownOpen();
}
setIsOpen((prevIsOpen) => !prevIsOpen);
if (isOpen) onClose && onClose();
};
@ -104,12 +110,18 @@ export const DateDropdown: React.FC<Props> = (props) => {
};
useOutsideClickDetector(dropdownRef, handleClose);
useOutsideKeydownDetector(dropdownRef, handleClose);
const disabledDays: Matcher[] = [];
if (minDate) disabledDays.push({ before: minDate });
if (maxDate) disabledDays.push({ after: maxDate });
useEffect(() => {
if (isDropdownOpened && !isOpen) setIsOpen(true);
}, [isDropdownOpened, isOpen]);
useEffect(() => {
if (isDropdownOpened === false) setIsOpen(false);
}, [isDropdownOpened]);
return (
<Combobox
as="div"

18
web/components/dropdowns/estimate.tsx
View File

@ -9,7 +9,6 @@ import { cn } from "@/helpers/common.helper";
import { useApplication, useEstimate } from "@/hooks/store";
import { useDropdownKeyDown } from "@/hooks/use-dropdown-key-down";
import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
import useOutsideKeydownDetector from "@/hooks/use-outside-keydown-detector";
// components
import { DropdownButton } from "./buttons";
// helpers
@ -23,6 +22,8 @@ type Props = TDropdownProps & {
dropdownArrow?: boolean;
dropdownArrowClassName?: string;
onChange: (val: number | null) => void;
isDropdownOpened?: boolean;
onOpen?: () => void;
onClose?: () => void;
projectId: string;
value: number | null;
@ -48,6 +49,8 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
dropdownArrowClassName = "",
hideIcon = false,
onChange,
isDropdownOpened,
onOpen: onDropdownOpen,
onClose,
placeholder = "Estimate",
placement,
@ -121,7 +124,10 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
};
const toggleDropdown = () => {
if (!isOpen) onOpen();
if (!isOpen) {
onOpen();
onDropdownOpen && onDropdownOpen();
}
setIsOpen((prevIsOpen) => !prevIsOpen);
if (isOpen) onClose && onClose();
};
@ -147,7 +153,6 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
};
useOutsideClickDetector(dropdownRef, handleClose);
useOutsideKeydownDetector(dropdownRef, handleClose);
useEffect(() => {
if (isOpen && inputRef.current) {
@ -155,6 +160,13 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
}
}, [isOpen]);
useEffect(() => {
if (isDropdownOpened && !isOpen) setIsOpen(true);
}, [isDropdownOpened, isOpen]);
useEffect(() => {
if (isDropdownOpened === false) setIsOpen(false);
}, [isDropdownOpened]);
return (
<Combobox
as="div"

16
web/components/dropdowns/member/index.tsx
View File

@ -1,4 +1,4 @@
import { Fragment, useRef, useState } from "react";
import { Fragment, useEffect, useRef, useState } from "react";
import { observer } from "mobx-react-lite";
import { ChevronDown } from "lucide-react";
import { Combobox } from "@headlessui/react";
@ -7,7 +7,6 @@ import { cn } from "@/helpers/common.helper";
import { useMember } from "@/hooks/store";
import { useDropdownKeyDown } from "@/hooks/use-dropdown-key-down";
import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
import useOutsideKeydownDetector from "@/hooks/use-outside-keydown-detector";
// components
import { DropdownButton } from "../buttons";
import { BUTTON_VARIANTS_WITH_TEXT } from "../constants";
@ -20,6 +19,8 @@ import { MemberDropdownProps } from "./types";
type Props = {
projectId?: string;
isDropdownOpened?: boolean;
onOpen?: () => void;
onClose?: () => void;
} & MemberDropdownProps;
@ -36,6 +37,8 @@ export const MemberDropdown: React.FC<Props> = observer((props) => {
hideIcon = false,
multiple,
onChange,
isDropdownOpened,
onOpen: onDropdownOpen,
onClose,
placeholder = "Members",
placement,
@ -68,6 +71,7 @@ export const MemberDropdown: React.FC<Props> = observer((props) => {
const toggleDropdown = () => {
setIsOpen((prevIsOpen) => !prevIsOpen);
if (!isOpen) onDropdownOpen && onDropdownOpen();
if (isOpen) onClose && onClose();
};
@ -85,7 +89,13 @@ export const MemberDropdown: React.FC<Props> = observer((props) => {
};
useOutsideClickDetector(dropdownRef, handleClose);
useOutsideKeydownDetector(dropdownRef, handleClose);
useEffect(() => {
if (isDropdownOpened && !isOpen) setIsOpen(true);
}, [isDropdownOpened, isOpen]);
useEffect(() => {
if (isDropdownOpened === false) setIsOpen(false);
}, [isDropdownOpened]);
return (
<Combobox

14
web/components/dropdowns/module/index.tsx
View File

@ -8,7 +8,6 @@ import { cn } from "@/helpers/common.helper";
import { useModule } from "@/hooks/store";
import { useDropdownKeyDown } from "@/hooks/use-dropdown-key-down";
import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
import useOutsideKeydownDetector from "@/hooks/use-outside-keydown-detector";
import { usePlatformOS } from "@/hooks/use-platform-os";
// components
import { DropdownButton } from "../buttons";
@ -26,6 +25,8 @@ type Props = TDropdownProps & {
dropdownArrowClassName?: string;
projectId: string;
showCount?: boolean;
isDropdownOpened?: boolean;
onOpen?: () => void;
onClose?: () => void;
} & (
| {
@ -158,6 +159,8 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
hideIcon = false,
multiple,
onChange,
isDropdownOpened,
onOpen: onDropdownOpen,
onClose,
placeholder = "Module",
placement,
@ -185,6 +188,7 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
const toggleDropdown = () => {
setIsOpen((prevIsOpen) => !prevIsOpen);
if (!isOpen) onDropdownOpen && onDropdownOpen();
if (isOpen) onClose && onClose();
};
@ -202,7 +206,6 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
};
useOutsideClickDetector(dropdownRef, handleClose);
useOutsideKeydownDetector(dropdownRef, handleClose);
const comboboxProps: any = {
value,
@ -217,6 +220,13 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
}
}, [isOpen]);
useEffect(() => {
if (isDropdownOpened && !isOpen) setIsOpen(true);
}, [isDropdownOpened, isOpen]);
useEffect(() => {
if (isDropdownOpened === false) setIsOpen(false);
}, [isDropdownOpened]);
return (
<Combobox
as="div"

14
web/components/dropdowns/priority.tsx
View File

@ -10,7 +10,6 @@ import { ISSUE_PRIORITIES } from "@/constants/issue";
import { cn } from "@/helpers/common.helper";
import { useDropdownKeyDown } from "@/hooks/use-dropdown-key-down";
import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
import useOutsideKeydownDetector from "@/hooks/use-outside-keydown-detector";
import { usePlatformOS } from "@/hooks/use-platform-os";
// icons
// helpers
@ -25,6 +24,8 @@ type Props = TDropdownProps & {
dropdownArrowClassName?: string;
highlightUrgent?: boolean;
onChange: (val: TIssuePriorities) => void;
isDropdownOpened?: boolean;
onOpen?: () => void;
onClose?: () => void;
value: TIssuePriorities;
};
@ -284,6 +285,8 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
hideIcon = false,
highlightUrgent = true,
onChange,
isDropdownOpened,
onOpen: onDropdownOpen,
onClose,
placement,
showTooltip = false,
@ -337,6 +340,7 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
const toggleDropdown = () => {
setIsOpen((prevIsOpen) => !prevIsOpen);
if (!isOpen) onDropdownOpen && onDropdownOpen();
if (isOpen) onClose && onClose();
};
@ -361,7 +365,6 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
};
useOutsideClickDetector(dropdownRef, handleClose);
useOutsideKeydownDetector(dropdownRef, handleClose);
const ButtonToRender = BORDER_BUTTON_VARIANTS.includes(buttonVariant)
? BorderButton
@ -375,6 +378,13 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
}
}, [isOpen]);
useEffect(() => {
if (isDropdownOpened && !isOpen) setIsOpen(true);
}, [isDropdownOpened, isOpen]);
useEffect(() => {
if (isDropdownOpened === false) setIsOpen(false);
}, [isDropdownOpened]);
return (
<Combobox
as="div"

17
web/components/dropdowns/state.tsx
View File

@ -9,7 +9,6 @@ import { cn } from "@/helpers/common.helper";
import { useApplication, useProjectState } from "@/hooks/store";
import { useDropdownKeyDown } from "@/hooks/use-dropdown-key-down";
import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
import useOutsideKeydownDetector from "@/hooks/use-outside-keydown-detector";
// components
import { DropdownButton } from "./buttons";
// icons
@ -24,6 +23,8 @@ type Props = TDropdownProps & {
dropdownArrow?: boolean;
dropdownArrowClassName?: string;
onChange: (val: string) => void;
isDropdownOpened?: boolean;
onOpen?: () => void;
onClose?: () => void;
projectId: string;
value: string;
@ -41,6 +42,8 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
dropdownArrowClassName = "",
hideIcon = false,
onChange,
isDropdownOpened,
onOpen: onDropdownOpen,
onClose,
placement,
projectId,
@ -103,7 +106,10 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
};
const toggleDropdown = () => {
if (!isOpen) onOpen();
if (!isOpen) {
onOpen();
onDropdownOpen && onDropdownOpen();
}
setIsOpen((prevIsOpen) => !prevIsOpen);
if (isOpen) onClose && onClose();
};
@ -129,13 +135,18 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
};
useOutsideClickDetector(dropdownRef, handleClose);
useOutsideKeydownDetector(dropdownRef, handleClose);
useEffect(() => {
if (isOpen && inputRef.current) {
inputRef.current.focus();
}
}, [isOpen]);
useEffect(() => {
if (isDropdownOpened && !isOpen) setIsOpen(true);
}, [isDropdownOpened, isOpen]);
useEffect(() => {
if (isDropdownOpened === false) setIsOpen(false);
}, [isDropdownOpened]);
return (
<Combobox

64
web/components/issues/issue-modal/form.tsx
View File

@ -5,9 +5,9 @@ import { Controller, useForm } from "react-hook-form";
import { LayoutPanelTop, Sparkle, X } from "lucide-react";
import { RichTextEditorWithRef } from "@plane/rich-text-editor";
import type { TIssue, ISearchIssueResponse } from "@plane/types";
// editor
// hooks
import { Button, CustomMenu, Input, Loader, ToggleSwitch, TOAST_TYPE, setToast } from "@plane/ui";
// components
import { GptAssistantPopover } from "@/components/core";
import {
CycleDropdown,
@ -22,17 +22,15 @@ import {
import { ParentIssuesListModal } from "@/components/issues";
import { IssueLabelSelect } from "@/components/issues/select";
import { CreateLabelModal } from "@/components/labels";
// helpers
import { renderFormattedPayloadDate, getDate } from "@/helpers/date-time.helper";
import { getChangedIssuefields } from "@/helpers/issue.helper";
import { shouldRenderProject } from "@/helpers/project.helper";
// hooks
import { useApplication, useEstimate, useIssueDetail, useMention, useProject, useWorkspace } from "@/hooks/store";
// services
import { AIService } from "@/services/ai.service";
import { FileService } from "@/services/file.service";
// components
// ui
// helpers
// types
const defaultValues: Partial<TIssue> = {
project_id: "",
@ -66,6 +64,19 @@ export interface IssueFormProps {
const aiService = new AIService();
const fileService = new FileService();
type TCurrentDropdownChoices =
| "state_id"
| "priority"
| "assignee_ids"
| "label_ids"
| "start_date"
| "target_date"
| "cycle_id"
| "module_ids"
| "estimate_point"
| "parent_id"
| undefined;
const TAB_INDICES = [
"name",
"description_html",
@ -109,6 +120,8 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
const [selectedParentIssue, setSelectedParentIssue] = useState<ISearchIssueResponse | null>(null);
const [gptAssistantModal, setGptAssistantModal] = useState(false);
const [iAmFeelingLucky, setIAmFeelingLucky] = useState(false);
const [currentDropdownState, setCurrentDropdownState] = useState<TCurrentDropdownChoices>(undefined);
const handleCurrentDropdownState = (value: TCurrentDropdownChoices) => setCurrentDropdownState(value);
// refs
const editorRef = useRef<any>(null);
@ -493,10 +506,15 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
projectId={projectId}
buttonVariant="border-with-text"
tabIndex={getTabIndex("state_id")}
// handling the current dropdown state
isDropdownOpened={currentDropdownState === "state_id" ? true : false}
onOpen={() => handleCurrentDropdownState("state_id")}
onClose={() => handleCurrentDropdownState(undefined)}
/>
</div>
)}
/>
<Controller
control={control}
name="priority"
@ -510,6 +528,10 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
}}
buttonVariant="border-with-text"
tabIndex={getTabIndex("priority")}
// handling the current dropdown state
isDropdownOpened={currentDropdownState === "priority" ? true : false}
onOpen={() => handleCurrentDropdownState("priority")}
onClose={() => handleCurrentDropdownState(undefined)}
/>
</div>
)}
@ -531,6 +553,10 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
placeholder="Assignees"
multiple
tabIndex={getTabIndex("assignee_ids")}
// handling the current dropdown state
isDropdownOpened={currentDropdownState === "assignee_ids" ? true : false}
onOpen={() => handleCurrentDropdownState("assignee_ids")}
onClose={() => handleCurrentDropdownState(undefined)}
/>
</div>
)}
@ -539,7 +565,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
control={control}
name="label_ids"
render={({ field: { value, onChange } }) => (
<div className="h-7">
<div className="h-7" tabIndex={getTabIndex("label_ids")}>
<IssueLabelSelect
setIsOpen={setLabelModal}
value={value}
@ -549,6 +575,10 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
}}
projectId={projectId}
tabIndex={getTabIndex("label_ids")}
// handling the current dropdown state
isDropdownOpened={currentDropdownState === "label_ids" ? true : false}
onOpen={() => handleCurrentDropdownState("label_ids")}
onClose={() => handleCurrentDropdownState(undefined)}
/>
</div>
)}
@ -565,6 +595,10 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
maxDate={maxDate ?? undefined}
placeholder="Start date"
tabIndex={getTabIndex("start_date")}
// handling the current dropdown state
isDropdownOpened={currentDropdownState === "start_date" ? true : false}
onOpen={() => handleCurrentDropdownState("start_date")}
onClose={() => handleCurrentDropdownState(undefined)}
/>
</div>
)}
@ -581,6 +615,10 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
minDate={minDate ?? undefined}
placeholder="Due date"
tabIndex={getTabIndex("target_date")}
// handling the current dropdown state
isDropdownOpened={currentDropdownState === "target_date" ? true : false}
onOpen={() => handleCurrentDropdownState("target_date")}
onClose={() => handleCurrentDropdownState(undefined)}
/>
</div>
)}
@ -600,6 +638,10 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
value={value}
buttonVariant="border-with-text"
tabIndex={getTabIndex("cycle_id")}
// handling the current dropdown state
isDropdownOpened={currentDropdownState === "cycle_id" ? true : false}
onOpen={() => handleCurrentDropdownState("cycle_id")}
onClose={() => handleCurrentDropdownState(undefined)}
/>
</div>
)}
@ -622,6 +664,10 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
tabIndex={getTabIndex("module_ids")}
multiple
showCount
// handling the current dropdown state
isDropdownOpened={currentDropdownState === "module_ids" ? true : false}
onOpen={() => handleCurrentDropdownState("module_ids")}
onClose={() => handleCurrentDropdownState(undefined)}
/>
</div>
)}
@ -642,6 +688,10 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
projectId={projectId}
buttonVariant="border-with-text"
tabIndex={getTabIndex("estimate_point")}
// handling the current dropdown state
isDropdownOpened={currentDropdownState === "estimate_point" ? true : false}
onOpen={() => handleCurrentDropdownState("estimate_point")}
onClose={() => handleCurrentDropdownState(undefined)}
/>
</div>
)}
@ -672,6 +722,8 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
}
placement="bottom-start"
tabIndex={getTabIndex("parent_id")}
onOpen={() => handleCurrentDropdownState("parent_id")}
onMenuClose={() => handleCurrentDropdownState(undefined)}
>
{watch("parent_id") ? (
<>

36
web/components/issues/select/label.tsx
View File

@ -4,19 +4,20 @@ import { useRouter } from "next/router";
import { usePopper } from "react-popper";
import { Check, Component, Plus, Search, Tag } from "lucide-react";
import { Combobox } from "@headlessui/react";
// hooks
// components
import { IssueLabelsList } from "@/components/ui";
// hooks
import { useLabel } from "@/hooks/store";
import { useDropdownKeyDown } from "@/hooks/use-dropdown-key-down";
import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
import useOutsideKeydownDetector from "@/hooks/use-outside-keydown-detector";
// ui
// icons
type Props = {
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
value: string[];
onChange: (value: string[]) => void;
isDropdownOpened?: boolean;
onOpen?: () => void;
onClose?: () => void;
projectId: string;
label?: JSX.Element;
disabled?: boolean;
@ -24,7 +25,18 @@ type Props = {
};
export const IssueLabelSelect: React.FC<Props> = observer((props) => {
const { setIsOpen, value, onChange, projectId, label, disabled = false, tabIndex } = props;
const {
setIsOpen,
value,
onChange,
isDropdownOpened,
onOpen: onDropdownOpen,
onClose,
projectId,
label,
disabled = false,
tabIndex,
} = props;
// router
const router = useRouter();
const { workspaceSlug } = router.query;
@ -60,7 +72,11 @@ export const IssueLabelSelect: React.FC<Props> = observer((props) => {
};
const toggleDropdown = () => {
if (!isDropdownOpen) onOpen();
if (!isDropdownOpen) {
onOpen();
onDropdownOpen && onDropdownOpen();
}
if (isDropdownOpen) onClose && onClose();
setIsDropdownOpen((prevIsOpen) => !prevIsOpen);
};
@ -77,7 +93,6 @@ export const IssueLabelSelect: React.FC<Props> = observer((props) => {
};
useOutsideClickDetector(dropdownRef, handleClose);
useOutsideKeydownDetector(dropdownRef, handleClose);
useEffect(() => {
if (isDropdownOpen && inputRef.current) {
@ -85,6 +100,13 @@ export const IssueLabelSelect: React.FC<Props> = observer((props) => {
}
}, [isDropdownOpen]);
useEffect(() => {
if (isDropdownOpened && !isDropdownOpen) setIsDropdownOpen(true);
}, [isDropdownOpened, isDropdownOpen]);
useEffect(() => {
if (isDropdownOpened === false) setIsDropdownOpen(false);
}, [isDropdownOpened]);
return (
<Combobox
as="div"

19
web/hooks/use-outside-keydown-detector.tsx
View File

@ -1,19 +0,0 @@
import React, { useEffect } from "react";
const useOutsideKeydownDetector = (ref: React.RefObject<HTMLElement>, callback: () => void) => {
const handleKeyDown = (event: KeyboardEvent) => {
if (ref.current && !ref.current.contains(event.target as Node)) {
callback();
}
};
useEffect(() => {
document.addEventListener("keydown", handleKeyDown);
return () => {
document.removeEventListener("keydown", handleKeyDown);
};
});
};
export default useOutsideKeydownDetector;