fix(form): Select correctly respects the readOnly prop

Closes #1089

Author: mlaursen

packages/form/src/select/Select.tsx

@@ -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}

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

@@ -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} />);
@@ -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("");
+  });
 });