fix: heroui-inc#4850

Solve Pressing ESC doesn't clear input value
linyonglu · Feb 21, 2025 · c5d0b2f · c5d0b2f
1 parent 943dfdb
commit c5d0b2f
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 0 deletions.
diff --git a/.changeset/grumpy-pandas-rescue.md b/.changeset/grumpy-pandas-rescue.md
@@ -0,0 +1,5 @@
+---
+"@heroui/input": major
+---
+
+- FIX: #4850
diff --git a/packages/components/input/src/use-input.ts b/packages/components/input/src/use-input.ts
@@ -352,6 +352,16 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
     [slots, isLabelHovered, labelProps, classNames?.label],
   );
 
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === "Escape" && inputValue) {
+        setInputValue("");
+        onClear?.();
+      }
+    },
+    [inputValue, setInputValue, onClear],
+  );
+
   const getInputProps: PropGetter = useCallback(
     (props = {}) => {
       return {
@@ -375,6 +385,7 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
         ),
         "aria-readonly": dataAttr(originalProps.isReadOnly),
         onChange: chain(inputProps.onChange, onChange),
+        onKeyDown: chain(props.onKeyDown, handleKeyDown),
         ref: domRef,
       };
     },
@@ -392,6 +403,7 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
       originalProps.isReadOnly,
       originalProps.isRequired,
       onChange,
+      handleKeyDown,
     ],
   );