fix(input): prevent clearable when input is readonly (#3643)

* fix(input): prevent clearable when input is readonly

* test(input): add tests for isReadOnly and isClearable interaction

* chore(changeset): add changeset for fixing clear button visibility with isReadOnly

* fix(input): disable clear button from input is readonly

* test(input): disable clear button when input is readonly

* chore(changeset): update changeset

* chore(changeset): revise message

---------

Co-authored-by: WK Wong <wingkwong.code@gmail.com>

.changeset/soft-wombats-wash.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/input": patch
+---
+
+disable clear button when input is read-only

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

@@ -200,6 +200,33 @@ describe("Input", () => {
 
     expect(inputs[1]).toBeVisible();
   });
+
+  it("should disable clear button when isReadOnly is true", async () => {
+    const onClear = jest.fn();
+
+    const ref = React.createRef<HTMLInputElement>();
+
+    const {getByRole} = render(
+      <Input
+        ref={ref}
+        isClearable
+        isReadOnly
+        defaultValue="readOnly test for clear button"
+        label="test input"
+        onClear={onClear}
+      />,
+    );
+
+    const clearButton = getByRole("button");
+
+    expect(clearButton).not.toBeNull();
+
+    const user = userEvent.setup();
+
+    await user.click(clearButton);
+
+    expect(onClear).toHaveBeenCalledTimes(0);
+  });
 });
 
 describe("Input with React Hook Form", () => {

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

@@ -248,7 +248,7 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
   });
 
   const {pressProps: clearPressProps} = usePress({
-    isDisabled: !!originalProps?.isDisabled,
+    isDisabled: !!originalProps?.isDisabled || !!originalProps?.isReadOnly,
     onPress: handleClear,
   });