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

* 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>

Author: 4 people

packages/ui/components/editor/plugins/AddVariablesDropdown.tsx

@@ -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>
               ))
             )}