feat(input): tests added

packages/components/input/__tests__/input.test.tsx

@@ -5,15 +5,87 @@ import {Input} from "../src";
 
 describe("Input", () => {
   it("should render correctly", () => {
-    const wrapper = render(<Input />);
+    const wrapper = render(<Input label="test input" />);
 
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
   it("ref should be forwarded", () => {
-    const ref = React.createRef<HTMLDivElement>();
+    const ref = React.createRef<HTMLInputElement>();
 
-    render(<Input ref={ref} />);
+    render(<Input ref={ref} label="test input" />);
     expect(ref.current).not.toBeNull();
   });
+
+  it("should have aria-invalid when invalid", () => {
+    const {container} = render(<Input label="test input" validationState="invalid" />);
+
+    expect(container.querySelector("input")).toHaveAttribute("aria-invalid", "true");
+  });
+
+  it("should have aria-readonly when isReadOnly", () => {
+    const {container} = render(<Input isReadOnly label="test input" />);
+
+    expect(container.querySelector("input")).toHaveAttribute("aria-readonly", "true");
+  });
+
+  it("should have disabled attribute when isDisabled", () => {
+    const {container} = render(<Input isDisabled label="test input" />);
+
+    expect(container.querySelector("input")).toHaveAttribute("disabled");
+  });
+
+  it("should have required attribute when isRequired", () => {
+    const {container} = render(<Input isRequired label="test input" />);
+
+    expect(container.querySelector("input")).toHaveAttribute("required");
+    expect(container.querySelector("input")).toHaveAttribute("aria-required", "true");
+  });
+
+  it("should have aria-describedby when description is provided", () => {
+    const {container} = render(<Input description="help text" label="test input" />);
+
+    expect(container.querySelector("input")).toHaveAttribute("aria-describedby");
+  });
+
+  it("should have aria-describedby when errorMessage is provided", () => {
+    const {container} = render(<Input errorMessage="error text" label="test input" />);
+
+    expect(container.querySelector("input")).toHaveAttribute("aria-describedby");
+  });
+
+  it("should have the same aria-labelledby as label id", () => {
+    const {container} = render(<Input label="test input" />);
+
+    expect(container.querySelector("input")).toHaveAttribute(
+      "aria-labelledby",
+      container.querySelector("label")?.id,
+    );
+  });
+
+  it("should have the correct type attribute", () => {
+    const {container} = render(<Input label="test input" type="email" />);
+
+    expect(container.querySelector("input")).toHaveAttribute("type", "email");
+
+    const {container: container2} = render(<Input label="test input" type="number" />);
+
+    expect(container2.querySelector("input")).toHaveAttribute("type", "number");
+
+    const {container: container3} = render(<Input label="test input" type="password" />);
+
+    expect(container3.querySelector("input")).toHaveAttribute("type", "password");
+
+    const {container: container4} = render(<Input label="test input" type="search" />);
+
+    expect(container4.querySelector("input")).toHaveAttribute("type", "search");
+
+    const {container: container5} = render(<Input label="test input" type="tel" />);
+
+    expect(container5.querySelector("input")).toHaveAttribute("type", "tel");
+
+    const {container: container6} = render(<Input label="test input" type="text" />);
+
+    expect(container6.querySelector("input")).toHaveAttribute("type", "text");
+  });
 });

packages/components/input/src/use-aria-text-field.ts

@@ -127,12 +127,14 @@ export function useAriaTextField<T extends TextFieldIntrinsicElements = DefaultE
     inputProps: mergeProps(domProps, inputElementType === "input" && inputOnlyProps, {
       disabled: isDisabled,
       readOnly: isReadOnly,
+      required: isRequired,
       "aria-required": isRequired || undefined,
       "aria-invalid": validationState === "invalid" || undefined,
       "aria-errormessage": props["aria-errormessage"],
       "aria-activedescendant": props["aria-activedescendant"],
       "aria-autocomplete": props["aria-autocomplete"],
       "aria-haspopup": props["aria-haspopup"],
+      "aria-readonly": isReadOnly,
       value: props.value,
       defaultValue: props.value ? undefined : props.defaultValue,
       onChange: (e: ChangeEvent<HTMLInputElement>) => onChange(e.target.value),

packages/components/input/src/use-input.ts

@@ -9,7 +9,7 @@ import {usePress} from "@react-aria/interactions";
 import {clsx, dataAttr} from "@nextui-org/shared-utils";
 import {useControlledState} from "@react-stately/utils";
 import {useMemo, Ref} from "react";
-import {chain, mergeProps} from "@react-aria/utils";
+import {chain, filterDOMProps, mergeProps} from "@react-aria/utils";
 
 import {useAriaTextField} from "./use-aria-text-field";
 
@@ -169,25 +169,23 @@ export function useInput(originalProps: UseInputProps) {
       "data-focus-visible": dataAttr(isFocusVisible),
       "data-focused": dataAttr(isFocused),
       "data-invalid": dataAttr(isInvalid),
-      ...mergeProps(focusProps, inputProps, otherProps, props),
+      ...mergeProps(focusProps, inputProps, filterDOMProps(otherProps, {labelable: true}), props),
     };
   };
 
   const getInputWrapperProps: PropGetter = (props = {}) => {
-    const canFocusInput = domRef.current && !startContent && !endContent;
-
     return {
       className: slots.inputWrapper({
         class: clsx(styles?.inputWrapper, !!inputValue ? "is-filled" : ""),
       }),
-      onClick: () => {
-        if (canFocusInput) {
-          domRef.current.focus();
+      onClick: (e: React.MouseEvent) => {
+        if (e.target === e.currentTarget) {
+          domRef.current?.focus();
         }
       },
       ...props,
       style: {
-        cursor: canFocusInput ? "text" : "default",
+        cursor: "text",
         ...props.style,
       },
     };