fix: isClearable handling

.changeset/seven-monkeys-lay.md

@@ -0,0 +1,7 @@
+---
+"@heroui/number-input": minor
+"@heroui/select": minor
+"@heroui/input": minor
+---
+
+fix isClearable implicit behaviour

packages/components/input/__tests__/textarea.test.tsx

@@ -60,12 +60,12 @@ describe("Textarea", () => {
     expect(onClear).toHaveBeenCalledTimes(0);
   });
 
-  it("should appear clear button when just define onClear but not define isClearable", async () => {
+  it("should not appear clear button when only onClear is defined without isClearable", async () => {
     const onClear = jest.fn();
 
     const ref = React.createRef<HTMLTextAreaElement>();
 
-    const {getByRole} = render(
+    const {queryByRole} = render(
       <Textarea
         ref={ref}
         defaultValue="junior@heroui.com"
@@ -74,8 +74,8 @@ describe("Textarea", () => {
       />,
     );
 
-    const clearButton = getByRole("button");
+    const clearButton = queryByRole("button");
 
-    expect(clearButton).not.toBeNull();
+    expect(clearButton).toBeNull();
   });
 });

packages/components/input/src/use-input.ts

@@ -78,7 +78,6 @@ export interface Props<T extends HTMLInputElement | HTMLTextAreaElement = HTMLIn
   classNames?: SlotsToClasses<InputSlots>;
   /**
    * Callback fired when the value is cleared.
-   * if you pass this prop, the clear button will be shown.
    */
   onClear?: () => void;
   /**
@@ -242,7 +241,7 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
     typeof props.errorMessage === "function"
       ? props.errorMessage({isInvalid, validationErrors, validationDetails})
       : props.errorMessage || validationErrors?.join(" ");
-  const isClearable = !!onClear || originalProps.isClearable;
+  const isClearable = originalProps.isClearable ?? false;
   const hasElements = !!label || !!description || !!errorMessage;
   const hasPlaceholder = !!props.placeholder;
   const hasLabel = !!label;
@@ -363,12 +362,7 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
 
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent<HTMLInputElement>) => {
-      if (
-        e.key === "Escape" &&
-        inputValue &&
-        (isClearable || onClear) &&
-        !originalProps.isReadOnly
-      ) {
+      if (e.key === "Escape" && inputValue && isClearable && !originalProps.isReadOnly) {
         setInputValue("");
         onClear?.();
       }

packages/components/number-input/src/use-number-input.ts

@@ -76,7 +76,6 @@ export interface Props extends Omit<HTMLHeroUIProps<"input">, keyof NumberInputV
   hideStepper?: boolean;
   /**
    * Callback fired when the value is cleared.
-   * if you pass this prop, the clear button will be shown.
    */
   onClear?: () => void;
   /**
@@ -208,7 +207,7 @@ export function useNumberInput(originalProps: UseNumberInputProps) {
     typeof props.errorMessage === "function"
       ? props.errorMessage({isInvalid, validationErrors, validationDetails})
       : props.errorMessage || validationErrors?.join(" ");
-  const isClearable = !!onClear || originalProps.isClearable;
+  const isClearable = originalProps.isClearable ?? false;
   const hasElements = !!label || !!description || !!errorMessage;
   const hasPlaceholder = !!props.placeholder;
   const hasLabel = !!label;
@@ -296,12 +295,7 @@ export function useNumberInput(originalProps: UseNumberInputProps) {
 
           inputElement.setSelectionRange(pos, pos);
         }, 0);
-      } else if (
-        e.key === "Escape" &&
-        inputValue &&
-        (isClearable || onClear) &&
-        !originalProps.isReadOnly
-      ) {
+      } else if (e.key === "Escape" && inputValue && isClearable && !originalProps.isReadOnly) {
         state.setInputValue("");
         onClear?.();
       }

packages/components/select/src/use-select.ts

@@ -127,7 +127,6 @@ interface Props<T> extends Omit<HTMLHeroUIProps<"select">, keyof SelectVariantPr
   onSelectionChange?: (keys: SharedSelection) => void;
   /**
    * Callback fired when the value is cleared.
-   * if you pass this prop, the clear button will be shown.
    */
   onClear?: () => void;
   /**