Skip to content

Commit d9a0262

Browse files
committed
fix(form): Select correctly respects the readOnly prop
Closes #1089
1 parent 2930595 commit d9a0262

File tree

2 files changed

+29
-0
lines changed

2 files changed

+29
-0
lines changed

packages/form/src/select/Select.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -396,6 +396,7 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(function Select(
396396
style={{ ...fixedStyle, ...listboxStyle }}
397397
className={listboxClassName}
398398
name={name}
399+
readOnly={readOnly}
399400
portal={portal}
400401
portalInto={portalInto}
401402
portalIntoId={portalIntoId}

packages/form/src/select/__tests__/Select.tsx

+28
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,15 @@ const getListbox = () => {
2929
return listbox;
3030
};
3131

32+
const getValue = () => {
33+
const value = document.getElementById("select-value");
34+
if (!value) {
35+
throw new Error();
36+
}
37+
38+
return value as HTMLInputElement;
39+
};
40+
3241
describe("Select", () => {
3342
it("should render correctly", () => {
3443
const { container, rerender } = render(<Select {...PROPS} />);
@@ -255,4 +264,23 @@ describe("Select", () => {
255264
fireEvent.keyDown(listbox, { key: "Escape" });
256265
expect(document.activeElement).toBe(select);
257266
});
267+
268+
it("should not allow the values to be changed when the readOnly prop is enabled", () => {
269+
const onChange = jest.fn();
270+
const { getByRole } = render(
271+
<Select {...PROPS} label="Label" readOnly onChange={onChange} />
272+
);
273+
274+
const button = getByRole("button", { name: "Label" });
275+
const value = getValue();
276+
expect(value.value).toBe("");
277+
278+
fireEvent.click(button);
279+
const listbox = getByRole("listbox", { name: "Label" });
280+
expect(document.activeElement).toBe(listbox);
281+
fireEvent.click(getByRole("option", { name: "Option 1" }));
282+
expect(onChange).not.toBeCalled();
283+
284+
expect(value.value).toBe("");
285+
});
258286
});

0 commit comments

Comments
 (0)