From 8587be6072112329243126509c59319e62e35c45 Mon Sep 17 00:00:00 2001
From: Camiel van Schoonhoven <camiel.vanschoonhoven@shopify.com>
Date: Mon, 23 Feb 2026 13:55:17 -0800
Subject: [PATCH] chore: Add onEnter and onEscape to Input Component

---
 .../Editor/Context/Tags/TagEditor.tsx         |  9 ++-----
 .../AnnotationFilterInput.tsx                 | 27 +++++++------------
 .../EditableAnnotationBadge.tsx               | 19 ++++---------
 src/components/shared/Dialogs/InputDialog.tsx | 19 +++++--------
 .../components/SubmitTaskArgumentsDialog.tsx  | 15 ++---------
 src/components/ui/input.tsx                   | 22 ++++++++++++++-
 6 files changed, 46 insertions(+), 65 deletions(-)

diff --git a/src/components/Editor/Context/Tags/TagEditor.tsx b/src/components/Editor/Context/Tags/TagEditor.tsx
index 1062ad708..81f661ec3 100644
--- a/src/components/Editor/Context/Tags/TagEditor.tsx
+++ b/src/components/Editor/Context/Tags/TagEditor.tsx
@@ -32,13 +32,8 @@ export const TagEditor = ({
         value={value}
         onChange={handleChange}
         onBlur={onSave}
-        onKeyDown={(e) => {
-          if (e.key === "Enter") {
-            onSave();
-          } else if (e.key === "Escape") {
-            onCancel();
-          }
-        }}
+        onEnter={onSave}
+        onEscape={onCancel}
         placeholder="Enter tag name..."
         className="h-7 text-xs w-36"
       />
diff --git a/src/components/shared/AnnotationFilterInput/AnnotationFilterInput.tsx b/src/components/shared/AnnotationFilterInput/AnnotationFilterInput.tsx
index 90e5c6c38..f1d5bbc79 100644
--- a/src/components/shared/AnnotationFilterInput/AnnotationFilterInput.tsx
+++ b/src/components/shared/AnnotationFilterInput/AnnotationFilterInput.tsx
@@ -1,4 +1,3 @@
-import type { KeyboardEvent } from "react";
 import { useState } from "react";
 
 import { Button } from "@/components/ui/button";
@@ -48,16 +47,10 @@ export function AnnotationFilterInput({
     onChange(newFilters);
   };
 
-  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === "Enter" && keyInput.trim()) {
-      e.preventDefault();
-      handleAdd();
-    }
-    if (e.key === "Escape") {
-      setIsExpanded(false);
-      setKeyInput("");
-      setValueInput("");
-    }
+  const handleCancel = () => {
+    setIsExpanded(false);
+    setKeyInput("");
+    setValueInput("");
   };
 
   return (
@@ -77,7 +70,8 @@ export function AnnotationFilterInput({
             placeholder="Key"
             value={keyInput}
             onChange={(e) => setKeyInput(e.target.value)}
-            onKeyDown={handleKeyDown}
+            onEnter={handleAdd}
+            onEscape={handleCancel}
             className="w-28 h-8 text-sm"
             autoFocus
           />
@@ -85,7 +79,8 @@ export function AnnotationFilterInput({
             placeholder="Value (optional)"
             value={valueInput}
             onChange={(e) => setValueInput(e.target.value)}
-            onKeyDown={handleKeyDown}
+            onEnter={handleAdd}
+            onEscape={handleCancel}
             className="w-36 h-8 text-sm"
           />
           <Button
@@ -99,11 +94,7 @@ export function AnnotationFilterInput({
           <Button
             variant="ghost"
             size="sm"
-            onClick={() => {
-              setIsExpanded(false);
-              setKeyInput("");
-              setValueInput("");
-            }}
+            onClick={handleCancel}
             aria-label="Cancel"
           >
             <Icon name="X" size="xs" />
diff --git a/src/components/shared/AnnotationFilterInput/EditableAnnotationBadge.tsx b/src/components/shared/AnnotationFilterInput/EditableAnnotationBadge.tsx
index dcd2215af..0f0b8e4b5 100644
--- a/src/components/shared/AnnotationFilterInput/EditableAnnotationBadge.tsx
+++ b/src/components/shared/AnnotationFilterInput/EditableAnnotationBadge.tsx
@@ -1,4 +1,4 @@
-import type { KeyboardEvent, MouseEvent } from "react";
+import type { MouseEvent } from "react";
 import { useEffect, useRef, useState } from "react";
 
 import { Badge } from "@/components/ui/badge";
@@ -54,17 +54,6 @@ export function EditableAnnotationBadge({
     setIsEditing(false);
   };
 
-  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === "Enter") {
-      e.preventDefault();
-      handleSave();
-    }
-    if (e.key === "Escape") {
-      e.preventDefault();
-      handleCancel();
-    }
-  };
-
   const handleDoubleClick = (e: MouseEvent<HTMLElement>) => {
     e.preventDefault();
     setIsEditing(true);
@@ -81,14 +70,16 @@ export function EditableAnnotationBadge({
           ref={keyInputRef}
           value={editKey}
           onChange={(e) => setEditKey(e.target.value)}
-          onKeyDown={handleKeyDown}
+          onEnter={handleSave}
+          onEscape={handleCancel}
           className="h-6 w-20 px-1.5 text-xs"
           placeholder="Key"
         />
         <Input
           value={editValue}
           onChange={(e) => setEditValue(e.target.value)}
-          onKeyDown={handleKeyDown}
+          onEnter={handleSave}
+          onEscape={handleCancel}
           className="h-6 w-24 px-1.5 text-xs"
           placeholder="Value"
         />
diff --git a/src/components/shared/Dialogs/InputDialog.tsx b/src/components/shared/Dialogs/InputDialog.tsx
index 2cac551de..7f9054003 100644
--- a/src/components/shared/Dialogs/InputDialog.tsx
+++ b/src/components/shared/Dialogs/InputDialog.tsx
@@ -1,4 +1,4 @@
-import { type KeyboardEvent, type ReactNode, useEffect, useState } from "react";
+import { type ReactNode, useEffect, useState } from "react";
 
 import {
   AlertDialog,
@@ -56,19 +56,13 @@ export function InputDialog({
   };
 
   const handleConfirm = () => {
-    onConfirm?.(value.trim());
-  };
+    const trimmedValue = value.trim();
 
-  const handleKeyDown = (e: KeyboardEvent) => {
-    if (e.key === "Escape") {
-      onCancel?.();
+    if (trimmedValue.length === 0 || disabled) {
+      return;
     }
 
-    if (disabled) return;
-
-    if (e.key === "Enter" && value.trim()) {
-      handleConfirm();
-    }
+    onConfirm?.(trimmedValue);
   };
 
   useEffect(() => {
@@ -96,7 +90,8 @@ export function InputDialog({
           value={value}
           onChange={(e) => handleValueChange(e.target.value)}
           placeholder={placeholder}
-          onKeyDown={handleKeyDown}
+          onEnter={handleConfirm}
+          onEscape={onCancel}
           autoFocus
           className={cn(!!error && "border-destructive")}
         />
diff --git a/src/components/shared/Submitters/Oasis/components/SubmitTaskArgumentsDialog.tsx b/src/components/shared/Submitters/Oasis/components/SubmitTaskArgumentsDialog.tsx
index 3d2058dad..48a301916 100644
--- a/src/components/shared/Submitters/Oasis/components/SubmitTaskArgumentsDialog.tsx
+++ b/src/components/shared/Submitters/Oasis/components/SubmitTaskArgumentsDialog.tsx
@@ -1,10 +1,5 @@
 import { useMutation } from "@tanstack/react-query";
-import {
-  type ChangeEvent,
-  type KeyboardEvent,
-  useEffect,
-  useState,
-} from "react";
+import { type ChangeEvent, useEffect, useState } from "react";
 
 import type { TaskSpecOutput } from "@/api/types.gen";
 import TooltipButton from "@/components/shared/Buttons/TooltipButton";
@@ -258,12 +253,6 @@ const CopyFromRunPopover = ({
     }
   };
 
-  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === "Enter") {
-      handleCustomRunIdSubmit();
-    }
-  };
-
   return (
     <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
       <PopoverTrigger asChild>
@@ -283,7 +272,7 @@ const CopyFromRunPopover = ({
                 placeholder="Run ID"
                 value={customRunId}
                 onChange={(e) => setCustomRunId(e.target.value)}
-                onKeyDown={handleKeyDown}
+                onEnter={handleCustomRunIdSubmit}
                 disabled={isCopyingFromRun}
                 className={cn(isError && "border-red-300", "flex-1")}
               />
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index 2de04d426..b5fbf5a5d 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -24,8 +24,15 @@ function Input({
   type,
   readOnly,
   variant = readOnly ? "readOnly" : "default",
+  onEnter,
+  onEscape,
+  onKeyDown,
   ...props
-}: React.ComponentProps<"input"> & VariantProps<typeof inputVariants>) {
+}: React.ComponentProps<"input"> &
+  VariantProps<typeof inputVariants> & {
+    onEnter?: () => void;
+    onEscape?: () => void;
+  }) {
   return (
     <input
       type={type}
@@ -36,6 +43,19 @@ function Input({
         className,
       )}
       readOnly={readOnly}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" && onEnter) {
+          e.preventDefault();
+          e.stopPropagation();
+          onEnter();
+        } else if (e.key === "Escape" && onEscape) {
+          e.preventDefault();
+          e.stopPropagation();
+          onEscape();
+        }
+
+        onKeyDown?.(e);
+      }}
       {...props}
     />
   );