diff --git a/.changeset/two-waves-own.md b/.changeset/two-waves-own.md
new file mode 100644
index 0000000000..8c534e7b7f
--- /dev/null
+++ b/.changeset/two-waves-own.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/input": patch
+---
+
+clear button should not receive focus when input is disabled.
diff --git a/packages/components/input/__tests__/input.test.tsx b/packages/components/input/__tests__/input.test.tsx
index 23859a06d5..5f967d25fb 100644
--- a/packages/components/input/__tests__/input.test.tsx
+++ b/packages/components/input/__tests__/input.test.tsx
@@ -37,6 +37,22 @@ describe("Input", () => {
expect(container.querySelector("input")).toHaveAttribute("disabled");
});
+ it("should disable the clear button when isDisabled", () => {
+ const {getByRole} = render();
+
+ const clearButton = getByRole("button");
+
+ expect(clearButton).toBeDisabled();
+ });
+
+ it("should not allow clear button to be focusable", () => {
+ const {getByRole} = render();
+
+ const clearButton = getByRole("button");
+
+ expect(clearButton).toHaveAttribute("tabIndex", "-1");
+ });
+
it("should have required attribute when isRequired with native validationBehavior", () => {
const {container} = render();
@@ -141,7 +157,7 @@ describe("Input", () => {
/>,
);
- const clearButton = getByRole("button");
+ const clearButton = getByRole("button")!;
expect(clearButton).not.toBeNull();
@@ -197,7 +213,7 @@ describe("Input", () => {
/>,
);
- const clearButton = getByRole("button");
+ const clearButton = getByRole("button")!;
expect(clearButton).not.toBeNull();
@@ -256,7 +272,7 @@ describe("Input with React Hook Form", () => {
input1 = document.querySelector("input[name=withDefaultValue]")!;
input2 = document.querySelector("input[name=withoutDefaultValue]")!;
input3 = document.querySelector("input[name=requiredField]")!;
- submitButton = document.querySelector("button")!;
+ submitButton = document.querySelector('button[type="submit"]')!;
});
it("should work with defaultValues", () => {
diff --git a/packages/components/input/src/input.tsx b/packages/components/input/src/input.tsx
index 9414472494..10c5ecf10e 100644
--- a/packages/components/input/src/input.tsx
+++ b/packages/components/input/src/input.tsx
@@ -36,7 +36,7 @@ const Input = forwardRef<"input", InputProps>((props, ref) => {
const end = useMemo(() => {
if (isClearable) {
- return {endContent || };
+ return ;
}
return endContent;
diff --git a/packages/components/input/src/use-input.ts b/packages/components/input/src/use-input.ts
index 256c75b8ec..26e0e15eff 100644
--- a/packages/components/input/src/use-input.ts
+++ b/packages/components/input/src/use-input.ts
@@ -510,8 +510,9 @@ export function useInput {
return {
...props,
- role: "button",
- tabIndex: 0,
+ type: "button",
+ tabIndex: -1,
+ disabled: originalProps.isDisabled,
"aria-label": "clear input",
"data-slot": "clear-button",
"data-focus-visible": dataAttr(isClearButtonFocusVisible),