Skip to content

Commit

Permalink
fix(radio): remove required attribute for Radio with validationBehavi…
Browse files Browse the repository at this point in the history
…or="aria" (#3110)
  • Loading branch information
ryo-manba authored May 28, 2024
1 parent 9a2cf47 commit 41d2eeb
Show file tree
Hide file tree
Showing 3 changed files with 25 additions and 3 deletions.
5 changes: 5 additions & 0 deletions .changeset/sour-starfishes-lick.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@nextui-org/radio": patch
---

Remove required attribute for Radio with validationBehavior="aria"
19 changes: 18 additions & 1 deletion packages/components/radio/__tests__/radio.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@ describe("Radio", () => {
expect(onFocus).toBeCalled();
});

it('should work correctly with "isRequired" prop', () => {
it("should have required attribute when isRequired with native validationBehavior", () => {
const {getByRole, getAllByRole} = render(
<RadioGroup isRequired label="Options" validationBehavior="native">
<Radio value="1">Option 1</Radio>
Expand All @@ -161,6 +161,23 @@ describe("Radio", () => {
expect(radios[0]).toHaveAttribute("required");
});

it("should not have required attribute when isRequired with aria validationBehavior", () => {
const {getByRole, getAllByRole} = render(
<RadioGroup isRequired label="Options" validationBehavior="aria">
<Radio value="1">Option 1</Radio>
<Radio value="2">Option 2</Radio>
</RadioGroup>,
);

const group = getByRole("radiogroup");

expect(group).toHaveAttribute("aria-required", "true");

const radios = getAllByRole("radio");

expect(radios[0]).not.toHaveAttribute("required");
});

it("should work correctly with controlled value", () => {
const onValueChange = jest.fn();

Expand Down
4 changes: 2 additions & 2 deletions packages/components/radio/src/use-radio.ts
Original file line number Diff line number Diff line change
Expand Up @@ -219,11 +219,11 @@ export function useRadio(props: UseRadioProps) {
(props = {}) => {
return {
ref: inputRef,
...mergeProps(props, inputProps, focusProps, {required: isRequired}),
...mergeProps(props, inputProps, focusProps),
onChange: chain(inputProps.onChange, onChange),
};
},
[inputProps, focusProps, isRequired, onChange],
[inputProps, focusProps, onChange],
);

const getLabelProps: PropGetter = useCallback(
Expand Down

0 comments on commit 41d2eeb

Please sign in to comment.