fix: form error scroll behavior

packages/components/src/components/Checkbox/Checkbox.module.scss

@@ -1,6 +1,9 @@
 @use "@/styles/mixins/focus";
+@use "@/styles/mixins/formControl";
 
 .checkbox {
+  @include formControl.formHiddenInputScrollBehaviorFix;
+
   .input {
     display: flex;
     flex-direction: row;

packages/components/src/components/CheckboxButton/CheckboxButton.module.scss

@@ -1,6 +1,8 @@
-@use "../../styles/mixins/formControl";
+@use "@/styles/mixins/formControl";
 
 .checkboxButton {
+  @include formControl.formHiddenInputScrollBehaviorFix;
+
   align-self: normal;
   width: fit-content;
 

packages/components/src/components/FileField/FileField.module.scss

@@ -0,0 +1,5 @@
+@use "@/styles/mixins/formControl";
+
+.FileField {
+  @include formControl.formHiddenInputScrollBehaviorFix;
+}

packages/components/src/components/FileField/FileField.tsx

@@ -11,6 +11,8 @@ import { PropsContextProvider } from "@/lib/propsContext";
 import { useObjectRef } from "@react-aria/utils";
 import { addAwaitedArrayBuffer } from "@mittwald/flow-core";
 import { useFieldComponent } from "@/lib/hooks/useFieldComponent";
+import styles from "./FileField.module.scss";
+import clsx from "clsx";
 
 export interface FileFieldProps
   extends
@@ -73,7 +75,10 @@ export const FileField = flowComponent("FileField", (props) => {
   };
 
   return (
-    <div {...fieldProps}>
+    <div
+      {...fieldProps}
+      className={clsx(fieldProps.className, styles.FileField)}
+    >
       <FieldErrorContext.Provider value={formValidationState.displayValidation}>
         <FieldErrorCaptureContext>
           <PropsContextProvider props={fieldPropsContext}>

packages/components/src/components/FileField/components/FileInput.module.scss

@@ -1,11 +1,3 @@
-.FileInput {
-  opacity: 0;
-  height: 0;
-  width: 0;
-  position: absolute;
-  pointer-events: none;
-}
-
 .trigger {
   order: 2;
 }

packages/components/src/components/FileField/components/FileInput.tsx

@@ -5,6 +5,7 @@ import { useObjectRef } from "@react-aria/utils";
 import type { PropsContext } from "@/lib/propsContext";
 import { PropsContextProvider } from "@/lib/propsContext";
 import styles from "./FileInput.module.scss";
+import { useVisuallyHidden } from "react-aria";
 
 export type FileInputOnChangeHandler = (files: FileList | null) => void;
 
@@ -21,6 +22,7 @@ export const FileInput: FC<FileInputProps> = (props) => {
   const { children, isDisabled, onChange, isReadOnly, ref, ...restInputProps } =
     props;
   const inputRef = useObjectRef(ref);
+  const { visuallyHiddenProps } = useVisuallyHidden();
 
   const handlePress = () => {
     if (inputRef.current?.value) {
@@ -48,7 +50,7 @@ export const FileInput: FC<FileInputProps> = (props) => {
       {children}
       <Aria.Input
         {...restInputProps}
-        className={styles.FileInput}
+        {...visuallyHiddenProps}
         type="file"
         ref={inputRef}
         onChange={handleChange}

packages/components/src/components/Switch/Switch.module.scss

@@ -1,6 +1,9 @@
 @use "@/styles/mixins/focus";
+@use "@/styles/mixins/formControl";
 
 .switch {
+  @include formControl.formHiddenInputScrollBehaviorFix;
+
   display: flex;
   align-items: center;
   column-gap: var(--switch--label-to-track-spacing);

packages/components/src/components/TextArea/TextArea.tsx

@@ -6,16 +6,25 @@ import { useObjectRef } from "@react-aria/utils";
 import { useFieldComponent } from "@/lib/hooks/useFieldComponent";
 import { PropsContextProvider } from "@/lib/propsContext";
 import clsx from "clsx";
-import { type PropsWithChildren, useEffect, useState } from "react";
+import { type ChangeEventHandler, useEffect, useState } from "react";
 import { useControlledHostValueProps } from "@/lib/remote/useControlledHostValueProps";
 import { useLocalizedStringFormatter } from "@/components/TranslationProvider/useLocalizedStringFormatter";
 import locales from "./locales/*.locale.json";
 import { FieldDescription } from "@/components/FieldDescription";
 
 export interface TextAreaProps
   extends
-    PropsWithChildren<Omit<Aria.TextFieldProps, "children">>,
-    Pick<Aria.TextAreaProps, "placeholder" | "rows" | "aria-hidden">,
+    Omit<Aria.TextAreaProps, "onChange" | "defaultValue" | "value">,
+    Pick<
+      Aria.TextFieldProps,
+      | "isReadOnly"
+      | "isDisabled"
+      | "isInvalid"
+      | "isRequired"
+      | "value"
+      | "defaultValue"
+      | "onChange"
+    >,
     FlowComponentProps<HTMLTextAreaElement> {
   /** Whether a character count should be displayed inside the field description. */
   showCharacterCount?: boolean;
@@ -45,6 +54,7 @@ export const TextArea = flowComponent("TextArea", (props) => {
     showCharacterCount,
     className,
     onChange,
+    isInvalid,
     ...rest
   } = useControlledHostValueProps(props);
 
@@ -78,13 +88,16 @@ export const TextArea = flowComponent("TextArea", (props) => {
         : null,
   );
 
-  const handleChange = (v: string) => {
+  const handleChange: ChangeEventHandler<HTMLTextAreaElement> = (event) => {
+    const value = event.target.value;
     if (showCharacterCount) {
-      setCharactersCount(v.length);
+      setCharactersCount(value.length);
     }
     if (onChange) {
-      onChange(v);
+      onChange(value);
     }
+
+    updateHeight();
   };
 
   const translation = useLocalizedStringFormatter(locales, "TextArea");
@@ -155,21 +168,18 @@ export const TextArea = flowComponent("TextArea", (props) => {
   };
 
   return (
-    <Aria.TextField
-      {...rest}
-      {...fieldProps}
-      className={rootClassName}
-      onChange={handleChange}
-    >
+    <div {...fieldProps} className={rootClassName}>
       <PropsContextProvider props={fieldPropsContext}>
         <FieldErrorCaptureContext>{children}</FieldErrorCaptureContext>
         <Aria.TextArea
+          {...rest}
+          aria-invalid={isInvalid}
           rows={rows}
           aria-hidden={props["aria-hidden"]}
           placeholder={placeholder}
           className={inputClassName}
           ref={localRef}
-          onChange={updateHeight}
+          onChange={handleChange}
           style={{
             minHeight: getHeight(rows),
             maxHeight: verticallyResizable
@@ -182,7 +192,7 @@ export const TextArea = flowComponent("TextArea", (props) => {
         )}
         <FieldErrorView />
       </PropsContextProvider>
-    </Aria.TextField>
+    </div>
   );
 });
 

packages/components/src/styles/mixins/formControl.scss

@@ -7,6 +7,12 @@
   @include formInteractionStates;
 }
 
+@mixin formHiddenInputScrollBehaviorFix {
+  // required for correct scroll behavior
+  // see https://react-aria.adobe.com/VisuallyHidden
+  position: relative;
+}
+
 @mixin formBorder {
   border-width: var(--form-control--border-width);
   border-style: var(--form-control--border-style);