fix(form): TextField and Select disabled behavior

The Select component will no longer open the Listbox if it somehow gains
focus while disabled (_should_ have been impossible though) and the
TextField now correctly passes the disabled attribute to the input
field.

Author: mlaursen

packages/form/src/select/Select.tsx

@@ -258,6 +258,10 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(function Select(
         onKeyDown(event);
       }
 
+      if (disabled) {
+        return;
+      }
+
       switch (event.key) {
         case " ":
         case "ArrowUp":
@@ -296,7 +300,7 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(function Select(
         // no default
       }
     },
-    [onKeyDown, show]
+    [onKeyDown, disabled, show]
   );
 
   const selectRef = useRef<HTMLDivElement | null>(null);

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

@@ -125,4 +125,23 @@ describe("Select", () => {
 
     expect(input.value).toBe("Option 1");
   });
+
+  it("should not open the listbox while disabled", () => {
+    render(<Select {...PROPS} disabled />);
+    expect(getListbox).toThrow();
+    const select = getSelect();
+
+    fireEvent.click(select);
+    expect(getListbox).toThrow();
+
+    fireEvent.focus(select);
+    fireEvent.keyDown(select, { key: " " });
+    expect(getListbox).toThrow();
+
+    fireEvent.keyDown(select, { key: "ArrowDown" });
+    expect(getListbox).toThrow();
+
+    fireEvent.keyDown(select, { key: "ArrowUp" });
+    expect(getListbox).toThrow();
+  });
 });

packages/form/src/text-field/TextField.tsx

@@ -212,6 +212,7 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
           {...props}
           ref={ref}
           type={type}
+          disabled={disabled}
           onFocus={onFocus}
           onBlur={onBlur}
           onChange={onChange}

packages/form/src/text-field/__tests__/TextField.tsx

@@ -12,5 +12,11 @@ describe("TextField", () => {
 
     rerender(<TextField {...props} label="Label" placeholder="Placeholder" />);
     expect(container).toMatchSnapshot();
+
+    rerender(
+      <TextField {...props} label="Label" placeholder="Placeholder" disabled />
+    );
+    expect(container).toMatchSnapshot();
+    expect(document.getElementById("field")).toHaveAttribute("disabled");
   });
 });

packages/form/src/text-field/__tests__/__snapshots__/TextField.tsx.snap

@@ -34,3 +34,25 @@ exports[`TextField should render correctly 2`] = `
   </div>
 </div>
 `;
+
+exports[`TextField should render correctly 3`] = `
+<div>
+  <div
+    class="rmd-text-field-container rmd-text-field-container--outline rmd-text-field-container--disabled rmd-text-field-container--label"
+  >
+    <label
+      class="rmd-label rmd-label--disabled rmd-floating-label"
+      for="field"
+    >
+      Label
+    </label>
+    <input
+      class="rmd-text-field rmd-text-field--floating"
+      disabled=""
+      id="field"
+      placeholder="Placeholder"
+      type="text"
+    />
+  </div>
+</div>
+`;