Auto focus the first invalid field when submitting a form (#5344)

Author: devongovett

packages/@adobe/spectrum-css-temp/components/inlinealert/index.css

@@ -48,6 +48,12 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-InLineAlert {
+  composes: spectrum-FocusRing;
+  --spectrum-focus-ring-gap: var(--spectrum-alias-focus-ring-gap);
+  --spectrum-focus-ring-border-size: var(--spectrum-inlinealert-border-width);
+  --spectrum-focus-ring-border-radius: var(--spectrum-inlinealert-border-radius);
+  --spectrum-focus-ring-size: var(--spectrum-button-primary-focus-ring-size-key-focus);
+
   position: relative;
 
   display: inline-block;
@@ -61,6 +67,8 @@ governing permissions and limitations under the License.
   border-inline-width: var(--spectrum-inlinealert-border-width);
   border-style: solid;
   border-radius: var(--spectrum-inlinealert-border-radius);
+
+  outline: none;
 }
 
 .spectrum-InLineAlert .spectrum-InLineAlert-grid {

packages/@react-aria/datepicker/src/useDateField.ts

@@ -139,7 +139,12 @@ export function useDateField<T extends DateValue>(props: AriaDateFieldOptions<T>
   }, [focusManager]);
 
   useFormReset(props.inputRef, state.value, state.setValue);
-  useFormValidation(props, state, props.inputRef);
+  useFormValidation({
+    ...props,
+    focus() {
+      focusManager.focusFirst();
+    }
+  }, state, props.inputRef);
 
   let inputProps: InputHTMLAttributes<HTMLInputElement> = {
     type: 'hidden',

packages/@react-aria/form/package.json

@@ -22,6 +22,7 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
+    "@react-aria/interactions": "^3.19.1",
     "@react-aria/utils": "^3.21.0",
     "@react-stately/form": "3.0.0-alpha.1",
     "@react-types/shared": "^3.21.0",

packages/@react-aria/form/src/useFormValidation.ts

@@ -12,13 +12,18 @@
 
 import {FormValidationState} from '@react-stately/form';
 import {RefObject, useEffect} from 'react';
+import {setInteractionModality} from '@react-aria/interactions';
 import {useEffectEvent, useLayoutEffect} from '@react-aria/utils';
 import {Validation, ValidationResult} from '@react-types/shared';
 
 type ValidatableElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
 
-export function useFormValidation<T>(props: Validation<T>, state: FormValidationState, ref: RefObject<ValidatableElement>) {
-  let {validationBehavior} = props;
+interface FormValidationProps<T> extends Validation<T> {
+  focus?: () => void
+}
+
+export function useFormValidation<T>(props: FormValidationProps<T>, state: FormValidationState, ref: RefObject<ValidatableElement>) {
+  let {validationBehavior, focus} = props;
 
   // This is a useLayoutEffect so that it runs before the useEffect in useFormValidationState, which commits the validation change.
   useLayoutEffect(() => {
@@ -43,14 +48,27 @@ export function useFormValidation<T>(props: Validation<T>, state: FormValidation
   });
 
   let onInvalid = useEffectEvent((e: Event) => {
-    // Prevent default browser error UI from appearing.
-    e.preventDefault();
-
     // Only commit validation if we are not already displaying one.
     // This avoids clearing server errors that the user didn't actually fix.
     if (!state.displayValidation.isInvalid) {
       state.commitValidation();
     }
+
+    // Auto focus the first invalid input in a form, unless the error already had its default prevented.
+    let form = ref.current?.form;
+    if (!e.defaultPrevented && form && getFirstInvalidInput(form) === ref.current) {
+      if (focus) {
+        focus();
+      } else {
+        ref.current?.focus();
+      }
+
+      // Always show focus ring.
+      setInteractionModality('keyboard');
+    }
+
+    // Prevent default browser error UI from appearing.
+    e.preventDefault();
   });
 
   let onChange = useEffectEvent(() => {
@@ -101,3 +119,14 @@ function getNativeValidity(input: ValidatableElement): ValidationResult {
     validationErrors: input.validationMessage ? [input.validationMessage] : []
   };
 }
+
+function getFirstInvalidInput(form: HTMLFormElement): ValidatableElement | null {
+  for (let i = 0; i < form.elements.length; i++) {
+    let element = form.elements[i] as ValidatableElement;
+    if (!element.validity.valid) {
+      return element;
+    }
+  }
+
+  return null;
+}

packages/@react-aria/select/src/HiddenSelect.tsx

@@ -61,7 +61,10 @@ export function useHiddenSelect<T>(props: AriaHiddenSelectOptions, state: Select
   let {visuallyHiddenProps} = useVisuallyHidden();
 
   useFormReset(props.selectRef, state.selectedKey, state.setSelectedKey);
-  useFormValidation({validationBehavior}, state, props.selectRef);
+  useFormValidation({
+    validationBehavior,
+    focus: () => triggerRef.current.focus()
+  }, state, props.selectRef);
 
   // In Safari, the <select> cannot have `display: none` or `hidden` for autofill to work.
   // In Firefox, there must be a <label> to identify the <select> whereas other browsers

packages/@react-spectrum/autocomplete/src/MobileSearchAutocomplete.tsx

@@ -87,7 +87,10 @@ function _MobileSearchAutocomplete<T extends object>(props: SpectrumSearchAutoco
   let {triggerProps, overlayProps} = useOverlayTrigger({type: 'listbox'}, state, buttonRef);
 
   let inputRef = useRef<HTMLInputElement>(null);
-  useFormValidation(props, state, inputRef);
+  useFormValidation({
+    ...props,
+    focus: () => buttonRef.current?.focus()
+  }, state, inputRef);
   let {isInvalid, validationErrors, validationDetails} = state.displayValidation;
   let validationState = props.validationState || (isInvalid ? 'invalid' : undefined);
   let errorMessage = props.errorMessage ?? validationErrors.join(' ');

packages/@react-spectrum/autocomplete/test/SearchAutocomplete.test.js

@@ -2504,10 +2504,10 @@ describe('SearchAutocomplete', function () {
 
             act(() => {getByTestId('form').checkValidity();});
 
+            expect(document.activeElement).toBe(input);
             expect(input).toHaveAttribute('aria-describedby');
             expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
 
-            await user.tab();
             await user.keyboard('Tw');
             act(() => {
               jest.runAllTimers();
@@ -2541,10 +2541,11 @@ describe('SearchAutocomplete', function () {
 
             act(() => {getByTestId('form').checkValidity();});
 
+            expect(document.activeElement).toBe(input);
             expect(input).toHaveAttribute('aria-describedby');
             expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Invalid value');
 
-            await user.tab();
+            await user.clear(input);
             await user.keyboard('On');
             act(() => {
               jest.runAllTimers();

packages/@react-spectrum/checkbox/test/CheckboxGroup.test.js

@@ -485,6 +485,7 @@ describe('CheckboxGroup', () => {
 
         expect(group).toHaveAttribute('aria-describedby');
         expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
+        expect(document.activeElement).toBe(checkboxes[0]);
 
         await user.click(checkboxes[0]);
         expect(checkboxes[0].validity.valid).toBe(true);
@@ -523,6 +524,7 @@ describe('CheckboxGroup', () => {
 
         expect(group).toHaveAttribute('aria-describedby');
         expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent(['You must accept all terms']);
+        expect(document.activeElement).toBe(checkboxes[0]);
 
         await user.click(checkboxes[0]);
         expect(group).toHaveAttribute('aria-describedby');
@@ -568,6 +570,7 @@ describe('CheckboxGroup', () => {
 
         expect(group).toHaveAttribute('aria-describedby');
         expect(document.getElementById(group.getAttribute('aria-describedby'))).toHaveTextContent('You must accept the terms. You must accept the cookies.');
+        expect(document.activeElement).toBe(checkboxes[0]);
 
         await user.click(checkboxes[0]);
         expect(checkboxes[0].validity.valid).toBe(true);

packages/@react-spectrum/color/test/ColorField.test.js

@@ -395,8 +395,8 @@ describe('ColorField', function () {
 
         expect(input).toHaveAttribute('aria-describedby');
         expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Constraints not satisfied');
+        expect(document.activeElement).toBe(input);
 
-        await user.tab();
         await user.keyboard('#000');
 
         expect(input).toHaveAttribute('aria-describedby');
@@ -424,8 +424,9 @@ describe('ColorField', function () {
 
         expect(input).toHaveAttribute('aria-describedby');
         expect(document.getElementById(input.getAttribute('aria-describedby'))).toHaveTextContent('Invalid value');
+        expect(document.activeElement).toBe(input);
 
-        await user.tab();
+        await user.clear(input);
         await user.keyboard('#111');
 
         expect(input).toHaveAttribute('aria-describedby');
@@ -515,8 +516,8 @@ describe('ColorField', function () {
         act(() => {getByTestId('form').checkValidity();});
 
         expect(input).toHaveAttribute('aria-describedby');
+        expect(document.activeElement).toBe(input);
 
-        await user.tab();
         await user.keyboard('333');
 
         expect(input).toHaveAttribute('aria-describedby');

packages/@react-spectrum/combobox/src/MobileComboBox.tsx

@@ -78,7 +78,10 @@ export const MobileComboBox = React.forwardRef(function MobileComboBox<T extends
   let {triggerProps, overlayProps} = useOverlayTrigger({type: 'listbox'}, state, buttonRef);
 
   let inputRef = useRef<HTMLInputElement>(null);
-  useFormValidation(props, state, inputRef);
+  useFormValidation({
+    ...props,
+    focus: () => buttonRef.current.focus()
+  }, state, inputRef);
   let {isInvalid, validationErrors, validationDetails} = state.displayValidation;
   let validationState = props.validationState || (isInvalid ? 'invalid' : null);
   let errorMessage = props.errorMessage ?? validationErrors.join(' ');