commonscomputer/cal.diy
4
0
Fork 0
Code Issues Pull Requests Actions 2.0k Packages Projects Releases Wiki Activity

fix: keyPress behaviour for Add Variable dropdown (#23405)

Browse Source 
* Fixed variable dropdown

* Radix fix

* addressed coderabits comments

* Adjust styles and structure in AddVariablesDropdown

---------

Co-authored-by: Kartik Saini <41051387+kart1ka@users.noreply.github.com>
Co-authored-by: Dhairyashil <dhairyashil10101010@gmail.com>
Co-authored-by: Dhairyashil Shinde <93669429+dhairyashiil@users.noreply.github.com>
Co-authored-by: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>
This commit is contained in:
沙什瓦特
2025-12-01 17:34:52 +00:00
committed by GitHub
co-authored by Kartik Saini Dhairyashil Dhairyashil Shinde Anik Dhabal Babu
parent 2c52e31c76
commit cd74f292ee
1 changed files with 84 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/components/editor/plugins/AddVariablesDropdown.tsx
+84 -13
View File
@@ -1,4 +1,4 @@
import { useMemo, useState } from "react";
import { useMemo, useState, useRef, useEffect } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import useMediaQuery from "@calcom/lib/hooks/useMediaQuery";
@@ -20,6 +20,28 @@ export const AddVariablesDropdown = (props: IAddVariablesDropdown) => {
const { t } = useLocale();
const [query, setQuery] = useState("");
const isMobile = useMediaQuery("(max-width: 640px)");
const [isOpen, setisOpen] = useState(false);
const [selectedIndex, setSelectedIndex] = useState<number>(-1);
const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);
const dropdownContainerRef = useRef<HTMLDivElement>(null);
useEffect(() => {
if (selectedIndex >= 0 && dropdownContainerRef.current && itemRefs.current[selectedIndex]) {
const container = dropdownContainerRef.current;
const selectedItem = itemRefs.current[selectedIndex];
if (selectedItem) {
const containerRect = container.getBoundingClientRect();
const itemRect = selectedItem.getBoundingClientRect();
if (itemRect.bottom > containerRect.bottom) {
container.scrollTop += itemRect.bottom - containerRect.bottom;
} else if (itemRect.top < containerRect.top) {
container.scrollTop -= containerRect.top - itemRect.top;
}
}
}
}, [selectedIndex]);
const filteredVariables = useMemo(() => {
const q = query.trim().toLowerCase();
@@ -32,12 +54,55 @@ export const AddVariablesDropdown = (props: IAddVariablesDropdown) => {
});
}, [props.variables, query, t]);
const handleOnOpen = (open: boolean) => {
setisOpen(open);
if (!open) setQuery("");
setSelectedIndex(open && filteredVariables.length > 0 ? 0 : -1);
};
const handleKeyDown = (e: React.KeyboardEvent) => {
if (filteredVariables.length === 0 || !isOpen) return;
switch (e.key) {
case "Enter":
e.preventDefault();
if (selectedIndex >= 0 && selectedIndex < filteredVariables.length) {
props.addVariable(t(`${filteredVariables[selectedIndex]}_variable`));
}
setisOpen(false);
setQuery("");
setSelectedIndex(-1);
break;
case "ArrowUp":
e.preventDefault();
setSelectedIndex((prev) => {
if (filteredVariables.length === 0) return -1;
if (prev <= 0 || prev === -1) return filteredVariables.length - 1;
return prev - 1;
});
break;
case "ArrowDown":
e.preventDefault();
setSelectedIndex((prev) => {
if (filteredVariables.length === 0) return -1;
if (prev >= filteredVariables.length - 1) return 0;
return prev + 1;
});
break;
case "Escape":
e.preventDefault();
setisOpen(false);
setQuery("");
setSelectedIndex(-1);
break;
}
};
return (
<Dropdown
onOpenChange={(open) => {
if (!open) setQuery("");
}}>
<DropdownMenuTrigger aria-label="Add variable" className="focus:bg-cal-muted pt-[6px]">
<Dropdown onOpenChange={handleOnOpen} open={isOpen}>
<DropdownMenuTrigger
aria-label="Add variable"
className="focus:bg-cal-muted pt-[6px] focus:outline-none">
<div className="items-center">
{props.isTextEditor ? (
<>
@@ -64,7 +129,7 @@ export const AddVariablesDropdown = (props: IAddVariablesDropdown) => {
)}
</div>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-52">
<DropdownMenuContent className="w-52" onKeyDown={handleKeyDown}>
<div className="stack-y-2 p-1">
<div className="text-muted ml-1 text-left text-xs font-medium tracking-wide">
{t("add_dynamic_variables")}
@@ -80,15 +145,21 @@ export const AddVariablesDropdown = (props: IAddVariablesDropdown) => {
className="border-subtle bg-default focus:ring-brand-800 w-full rounded-md border px-3 py-2 text-sm outline-none focus:ring-1"
/>
</div>
<div className="max-h-64 overflow-y-auto overflow-x-hidden md:max-h-80">
<div className="max-h-64 overflow-y-auto overflow-x-hidden md:max-h-80" ref={dropdownContainerRef}>
{filteredVariables.length === 0 ? (
<div className="text-subtle px-4 py-2 text-center text-sm">{t("no_variables_found")}</div>
) : (
filteredVariables.map((variable) => (
<DropdownMenuItem key={variable} className="w-full p-1 hover:ring-0">
<div
filteredVariables.map((variable, index) => (
<DropdownMenuItem key={variable} className="w-full p-1 hover:ring-0 focus:outline-none">
<button
ref={(el) => (itemRefs.current[index] = el)}
key={variable}
className="w-full cursor-pointer rounded-md text-left transition-colors"
type="button"
className={`hover:bg-muted w-full rounded-md px-3 py-2 text-left transition-colors focus:outline-none ${
selectedIndex === index ? "bg-muted" : ""
}`}
onMouseEnter={() => setSelectedIndex(index)}
data-active={selectedIndex === index}
onClick={() => {
props.addVariable(t(`${variable}_variable`));
setQuery("");
@@ -103,7 +174,7 @@ export const AddVariablesDropdown = (props: IAddVariablesDropdown) => {
</div>
<div className="text-muted hidden text-xs sm:block">{t(`${variable}_info`)}</div>
</div>
</div>
</button>
</DropdownMenuItem>
))
)}