Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
fix(form): Select correctly respects the readOnly prop
Closes #1089
  • Loading branch information
mlaursen committed Mar 22, 2021
1 parent 2930595 commit d9a0262
Show file tree
Hide file tree
Showing 2 changed files with 29 additions and 0 deletions.
1 change: 1 addition & 0 deletions packages/form/src/select/Select.tsx
Expand Up @@ -396,6 +396,7 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(function Select(
style={{ ...fixedStyle, ...listboxStyle }}
className={listboxClassName}
name={name}
readOnly={readOnly}
portal={portal}
portalInto={portalInto}
portalIntoId={portalIntoId}
Expand Down
28 changes: 28 additions & 0 deletions packages/form/src/select/__tests__/Select.tsx
Expand Up @@ -29,6 +29,15 @@ const getListbox = () => {
return listbox;
};

const getValue = () => {
const value = document.getElementById("select-value");
if (!value) {
throw new Error();
}

return value as HTMLInputElement;
};

describe("Select", () => {
it("should render correctly", () => {
const { container, rerender } = render(<Select {...PROPS} />);
Expand Down Expand Up @@ -255,4 +264,23 @@ describe("Select", () => {
fireEvent.keyDown(listbox, { key: "Escape" });
expect(document.activeElement).toBe(select);
});

it("should not allow the values to be changed when the readOnly prop is enabled", () => {
const onChange = jest.fn();
const { getByRole } = render(
<Select {...PROPS} label="Label" readOnly onChange={onChange} />
);

const button = getByRole("button", { name: "Label" });
const value = getValue();
expect(value.value).toBe("");

fireEvent.click(button);
const listbox = getByRole("listbox", { name: "Label" });
expect(document.activeElement).toBe(listbox);
fireEvent.click(getByRole("option", { name: "Option 1" }));
expect(onChange).not.toBeCalled();

expect(value.value).toBe("");
});
});

0 comments on commit d9a0262

Please sign in to comment.