Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(input): ensure clear button is not focusable when disabled #3774

Merged
merged 8 commits into from
Sep 26, 2024
Merged

fix(input): ensure clear button is not focusable when disabled #3774

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
b530806
fix(input): ensure clear button is not focusable when disabled
ryxxn Sep 17, 2024
99ce409
test(input): add test to ensure clear button is not focusable when di…
ryxxn Sep 17, 2024
2823aea
chore: add changeset for clear button focus fix when input is disabled
ryxxn Sep 17, 2024
4716c45
fix(input): update clear button to use button element
ryxxn Sep 19, 2024
081c0e4
test(input): add focus test when disabled
ryxxn Sep 19, 2024
b3bd46a
test(input): replace querySelector with getByRole for clear button
ryxxn Sep 21, 2024
84fd6b4
fix(input): set tabIndex to -1 for clear button
ryxxn Sep 25, 2024
10b4a1d
test(input): ensure clear button is not focusable
ryxxn Sep 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/two-waves-own.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@nextui-org/input": patch
---

clear button should not receive focus when input is disabled.
8 changes: 8 additions & 0 deletions packages/components/input/__tests__/input.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,14 @@ describe("Input", () => {
expect(container.querySelector("input")).toHaveAttribute("disabled");
});

it("should set tabIndex to -1 when isDisabled is true", () => {
wingkwong marked this conversation as resolved.
Show resolved Hide resolved
const {getByRole} = render(<Input isClearable isDisabled label="test input" />);

const clearButton = getByRole("button");

expect(clearButton).toHaveAttribute("tabIndex", "-1");
});

it("should have required attribute when isRequired with native validationBehavior", () => {
const {container} = render(<Input isRequired label="test input" validationBehavior="native" />);

Expand Down
2 changes: 1 addition & 1 deletion packages/components/input/src/use-input.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -511,7 +511,7 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
return {
...props,
role: "button",
tabIndex: 0,
tabIndex: originalProps?.isDisabled ? -1 : 0,
wingkwong marked this conversation as resolved.
Show resolved Hide resolved
"aria-label": "clear input",
"data-slot": "clear-button",
"data-focus-visible": dataAttr(isClearButtonFocusVisible),
Expand Down