@base-ui/react 1.6.0 → 1.7.0

package/field/root/FieldRoot.js

@@ -59,10 +59,6 @@ var _jsxRuntime = require("react/jsx-runtime");
       markedDirtyRef.current = dirtyProp;
     }
   }, [dirtyProp]);
-  const getRegisteredFieldId = React.useCallback(() => registeredFieldIdRef.current, []);
-  const setRegisteredFieldId = React.useCallback(id => {
-    registeredFieldIdRef.current = id;
-  }, []);
   const setDirty = (0, _useStableCallback.useStableCallback)(value => {
     if (dirtyProp !== undefined) {
       return;
@@ -89,7 +85,11 @@ var _jsxRuntime = require("react/jsx-runtime");
     value: null,
     initialValue: null
   });
-  const valid = disabled ? null : !invalid && validityData.state.valid;
+
+  // App-controlled invalidity (the `invalid` prop and `<Form>` errors) keeps the field marked
+  // invalid even while disabled. Only computed validity (native constraints and `validate`)
+  // is suppressed when disabled, matching `:disabled` not participating in constraint validation.
+  const valid = !invalid && (disabled ? null : validityData.state.valid);
   const state = React.useMemo(() => ({
     disabled,
     touched,
@@ -107,7 +107,7 @@ var _jsxRuntime = require("react/jsx-runtime");
     markedDirtyRef,
     state,
     shouldValidateOnChange,
-    getRegisteredFieldId
+    registeredFieldIdRef
   });
   const [validateFieldControl, registerFieldControl] = (0, _useFieldControlRegistration.useFieldControlRegistration)({
     commit: validation.commit,
@@ -115,7 +115,7 @@ var _jsxRuntime = require("react/jsx-runtime");
     markedDirtyRef,
     name,
     setRegisteredFieldName,
-    setRegisteredFieldId,
+    registeredFieldIdRef,
     setValidityData,
     validityData
   });
@@ -128,23 +128,16 @@ var _jsxRuntime = require("react/jsx-runtime");
     validityData,
     setValidityData,
     disabled,
-    touched,
     setTouched,
-    dirty,
     setDirty,
-    filled,
     setFilled,
-    focused,
     setFocused,
-    validate,
     validationMode,
-    validationDebounceTime,
     shouldValidateOnChange,
     state,
-    markedDirtyRef,
     registerFieldControl,
     validation
-  }), [invalid, effectiveName, validityData, disabled, touched, setTouched, dirty, setDirty, filled, setFilled, focused, setFocused, validate, validationMode, validationDebounceTime, shouldValidateOnChange, state, registerFieldControl, validation]);
+  }), [invalid, effectiveName, validityData, disabled, setTouched, setDirty, setFilled, setFocused, validationMode, shouldValidateOnChange, state, registerFieldControl, validation]);
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     ref: forwardedRef,
     state,

package/field/root/FieldRoot.mjs

@@ -55,10 +55,6 @@ const FieldRootInner = /*#__PURE__*/React.forwardRef(function FieldRootInner(com
       markedDirtyRef.current = dirtyProp;
     }
   }, [dirtyProp]);
-  const getRegisteredFieldId = React.useCallback(() => registeredFieldIdRef.current, []);
-  const setRegisteredFieldId = React.useCallback(id => {
-    registeredFieldIdRef.current = id;
-  }, []);
   const setDirty = useStableCallback(value => {
     if (dirtyProp !== undefined) {
       return;
@@ -85,7 +81,11 @@ const FieldRootInner = /*#__PURE__*/React.forwardRef(function FieldRootInner(com
     value: null,
     initialValue: null
   });
-  const valid = disabled ? null : !invalid && validityData.state.valid;
+
+  // App-controlled invalidity (the `invalid` prop and `<Form>` errors) keeps the field marked
+  // invalid even while disabled. Only computed validity (native constraints and `validate`)
+  // is suppressed when disabled, matching `:disabled` not participating in constraint validation.
+  const valid = !invalid && (disabled ? null : validityData.state.valid);
   const state = React.useMemo(() => ({
     disabled,
     touched,
@@ -103,7 +103,7 @@ const FieldRootInner = /*#__PURE__*/React.forwardRef(function FieldRootInner(com
     markedDirtyRef,
     state,
     shouldValidateOnChange,
-    getRegisteredFieldId
+    registeredFieldIdRef
   });
   const [validateFieldControl, registerFieldControl] = useFieldControlRegistration({
     commit: validation.commit,
@@ -111,7 +111,7 @@ const FieldRootInner = /*#__PURE__*/React.forwardRef(function FieldRootInner(com
     markedDirtyRef,
     name,
     setRegisteredFieldName,
-    setRegisteredFieldId,
+    registeredFieldIdRef,
     setValidityData,
     validityData
   });
@@ -124,23 +124,16 @@ const FieldRootInner = /*#__PURE__*/React.forwardRef(function FieldRootInner(com
     validityData,
     setValidityData,
     disabled,
-    touched,
     setTouched,
-    dirty,
     setDirty,
-    filled,
     setFilled,
-    focused,
     setFocused,
-    validate,
     validationMode,
-    validationDebounceTime,
     shouldValidateOnChange,
     state,
-    markedDirtyRef,
     registerFieldControl,
     validation
-  }), [invalid, effectiveName, validityData, disabled, touched, setTouched, dirty, setDirty, filled, setFilled, focused, setFocused, validate, validationMode, validationDebounceTime, shouldValidateOnChange, state, registerFieldControl, validation]);
+  }), [invalid, effectiveName, validityData, disabled, setTouched, setDirty, setFilled, setFocused, validationMode, shouldValidateOnChange, state, registerFieldControl, validation]);
   const element = useRenderElement('div', componentProps, {
     ref: forwardedRef,
     state,

package/field/root/useFieldValidation.d.mts

@@ -2,6 +2,19 @@ import * as React from 'react';
 import type { Form } from "../../form/index.mjs";
 import type { HTMLProps } from "../../internals/types.mjs";
 import type { FieldValidityData, FieldRootState } from "./FieldRoot.mjs";
+export type RegisteredInput = {
+  controlRef: React.RefObject<HTMLElement | null>;
+  value: string | undefined;
+};
+export type RegisteredInputs = Map<HTMLInputElement, RegisteredInput>;
+/**
+ * Whether an input participates in the surrounding Base UI Form. Inputs that are effectively
+ * disabled, or whose `form` attribute explicitly associates them with another form, are excluded.
+ * DOM position only matters when it associates the input with a different form. Otherwise, field
+ * registration is context-driven, so portaled inputs (for example inside a dialog) still belong to
+ * the form for both validation and values projected into `onFormSubmit`.
+ */
+export declare function isEligibleInput(input: HTMLInputElement, formElement: HTMLFormElement | null): boolean;
 export declare function useFieldValidation(params: UseFieldValidationParameters): UseFieldValidationReturnValue;
 export interface UseFieldValidationParameters {
   setValidityData: (data: FieldValidityData) => void;
@@ -12,12 +25,14 @@ export interface UseFieldValidationParameters {
   markedDirtyRef: React.RefObject<boolean>;
   state: FieldRootState;
   shouldValidateOnChange: () => boolean;
-  getRegisteredFieldId: () => string | undefined;
+  registeredFieldIdRef: React.RefObject<string | undefined>;
 }
 export interface UseFieldValidationReturnValue {
   getValidationProps: (disabled: boolean, props?: HTMLProps) => HTMLProps;
   inputRef: React.RefObject<HTMLInputElement | null>;
-  registerInput: React.RefCallback<HTMLInputElement>;
+  registeredInputs: RegisteredInputs;
+  registerInput: (element: HTMLInputElement, registration: RegisteredInput) => void | (() => void);
+  getInputControl: () => HTMLElement | null;
   commit: (value: unknown) => Promise<void>;
   change: (value: unknown) => void;
 }

package/field/root/useFieldValidation.d.ts

@@ -2,6 +2,19 @@ import * as React from 'react';
 import type { Form } from "../../form/index.js";
 import type { HTMLProps } from "../../internals/types.js";
 import type { FieldValidityData, FieldRootState } from "./FieldRoot.js";
+export type RegisteredInput = {
+  controlRef: React.RefObject<HTMLElement | null>;
+  value: string | undefined;
+};
+export type RegisteredInputs = Map<HTMLInputElement, RegisteredInput>;
+/**
+ * Whether an input participates in the surrounding Base UI Form. Inputs that are effectively
+ * disabled, or whose `form` attribute explicitly associates them with another form, are excluded.
+ * DOM position only matters when it associates the input with a different form. Otherwise, field
+ * registration is context-driven, so portaled inputs (for example inside a dialog) still belong to
+ * the form for both validation and values projected into `onFormSubmit`.
+ */
+export declare function isEligibleInput(input: HTMLInputElement, formElement: HTMLFormElement | null): boolean;
 export declare function useFieldValidation(params: UseFieldValidationParameters): UseFieldValidationReturnValue;
 export interface UseFieldValidationParameters {
   setValidityData: (data: FieldValidityData) => void;
@@ -12,12 +25,14 @@ export interface UseFieldValidationParameters {
   markedDirtyRef: React.RefObject<boolean>;
   state: FieldRootState;
   shouldValidateOnChange: () => boolean;
-  getRegisteredFieldId: () => string | undefined;
+  registeredFieldIdRef: React.RefObject<string | undefined>;
 }
 export interface UseFieldValidationReturnValue {
   getValidationProps: (disabled: boolean, props?: HTMLProps) => HTMLProps;
   inputRef: React.RefObject<HTMLInputElement | null>;
-  registerInput: React.RefCallback<HTMLInputElement>;
+  registeredInputs: RegisteredInputs;
+  registerInput: (element: HTMLInputElement, registration: RegisteredInput) => void | (() => void);
+  getInputControl: () => HTMLElement | null;
   commit: (value: unknown) => Promise<void>;
   change: (value: unknown) => void;
 }

package/field/root/useFieldValidation.js

@@ -5,6 +5,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.isEligibleInput = isEligibleInput;
 exports.useFieldValidation = useFieldValidation;
 var React = _interopRequireWildcard(require("react"));
 var _empty = require("@base-ui/utils/empty");
@@ -17,34 +18,35 @@ var _constants = require("../../internals/field-constants/constants");
 var _FormContext = require("../../internals/form-context/FormContext");
 var _getCombinedFieldValidityData = require("../utils/getCombinedFieldValidityData");
 const validityKeys = Object.keys(_constants.DEFAULT_VALIDITY_STATE);
-function isOnlyValueMissing(state) {
-  if (!state || state.valid || !state.valueMissing) {
+/**
+ * Whether an input participates in the surrounding Base UI Form. Inputs that are effectively
+ * disabled, or whose `form` attribute explicitly associates them with another form, are excluded.
+ * DOM position only matters when it associates the input with a different form. Otherwise, field
+ * registration is context-driven, so portaled inputs (for example inside a dialog) still belong to
+ * the form for both validation and values projected into `onFormSubmit`.
+ */
+function isEligibleInput(input, formElement) {
+  if (input.matches(':disabled')) {
     return false;
   }
-  let onlyValueMissing = false;
-  for (const key of validityKeys) {
-    if (key === 'valid') {
-      continue;
-    }
-    if (key === 'valueMissing') {
-      onlyValueMissing = state[key];
-    } else if (state[key]) {
-      onlyValueMissing = false;
-    }
+  if (!formElement || input.form === formElement) {
+    return true;
   }
-  return onlyValueMissing;
+
+  // React context crosses portal boundaries. An unassociated portaled input still participates in
+  // contextual validation, unless an explicit `form` attribute opts it out of the surrounding Form.
+  return input.form === null && !input.hasAttribute('form');
 }
 
 /**
  * Picks the input whose native validity should represent a field that owns several inputs (such as a
- * checkbox group). Prefers the first enabled currently-invalid input, where "first" follows Set
- * insertion order (mount order), and otherwise returns the first enabled input. Disabled inputs are
- * skipped because they don't participate in native constraint validation.
+ * checkbox or radio group). Prefers the first eligible currently-invalid input, where "first" follows
+ * registration order (mount order), and otherwise returns the first eligible input.
  */
-function findRepresentativeInput(inputs) {
+function findRepresentativeInput(inputs, formElement) {
   let fallback = null;
-  for (const input of inputs) {
-    if (input.disabled) {
+  for (const input of inputs.keys()) {
+    if (!isEligibleInput(input, formElement)) {
       continue;
     }
     if (!input.validity.valid) {
@@ -55,17 +57,14 @@ function findRepresentativeInput(inputs) {
   return fallback;
 }
 function clearCustomValidity(element, inputs) {
-  let didClearElement = false;
-  for (const input of inputs) {
+  for (const input of inputs.keys()) {
     input.setCustomValidity('');
-    didClearElement ||= input === element;
-  }
-  if (!didClearElement) {
-    element.setCustomValidity('');
   }
+  element?.setCustomValidity('');
 }
 function useFieldValidation(params) {
   const {
+    elementRef,
     formRef
   } = (0, _FormContext.useFormContext)();
   const {
@@ -77,7 +76,7 @@ function useFieldValidation(params) {
     markedDirtyRef,
     state,
     shouldValidateOnChange,
-    getRegisteredFieldId
+    registeredFieldIdRef
   } = params;
   const {
     controlId,
@@ -85,32 +84,27 @@ function useFieldValidation(params) {
   } = (0, _LabelableContext.useLabelableContext)();
   const timeout = (0, _useTimeout.useTimeout)();
   const inputRef = React.useRef(null);
-  const registeredInputs = (0, _useRefWithInit.useRefWithInit)(() => new Set()).current;
+  const registeredInputs = (0, _useRefWithInit.useRefWithInit)(() => new Map()).current;
   const validationCommitIdRef = React.useRef(0);
 
-  // Checkbox groups register several inputs against a single field. Track them so a `required`
-  // checkbox can't be satisfied by another input in the group, matching native per-checkbox behavior.
-  const registerInput = React.useCallback(element => {
-    if (!element) {
-      return undefined;
-    }
-    registeredInputs.add(element);
+  // Groups register several inputs against a single field so focus, validation, and form-value
+  // projection can use the same live controls. This also ensures a `required` checkbox can't be
+  // satisfied by another input in the group, matching native per-checkbox behavior.
+  const registerInput = React.useCallback((element, registration) => {
+    registeredInputs.set(element, registration);
     return () => {
       registeredInputs.delete(element);
     };
   }, [registeredInputs]);
+  const getInputControl = (0, _useStableCallback.useStableCallback)(() => {
+    const element = findRepresentativeInput(registeredInputs, elementRef.current);
+    return element && registeredInputs.get(element)?.controlRef.current || null;
+  });
   const commit = (0, _useStableCallback.useStableCallback)(async (value, revalidate = false) => {
-    // A field can own several inputs (a checkbox group), but only the last-mounted one wins the shared
-    // `inputRef`. Validate against the registry instead so every input counts; `inputRef` is the
-    // fallback only when no registered input applies (none registered, or all of them disabled).
-    const element = findRepresentativeInput(registeredInputs) ?? inputRef.current;
-    if (!element) {
-      return;
-    }
     validationCommitIdRef.current += 1;
     const validationCommitId = validationCommitIdRef.current;
     function updateRegisteredFieldValidity(nextValidityData, externalInvalid = invalid) {
-      const fieldId = getRegisteredFieldId() ?? controlId;
+      const fieldId = registeredFieldIdRef.current ?? controlId;
       if (fieldId == null) {
         return;
       }
@@ -124,8 +118,31 @@ function useFieldValidation(params) {
         validityData: validityDataWithFormErrors
       });
     }
+    function publishAllValid(input, externalInvalid) {
+      const nextValidityData = {
+        value,
+        state: {
+          ..._constants.DEFAULT_VALIDITY_STATE,
+          valid: true
+        },
+        error: '',
+        errors: [],
+        initialValue: validityData.initialValue
+      };
+      clearCustomValidity(input, registeredInputs);
+      updateRegisteredFieldValidity(nextValidityData, externalInvalid);
+      setValidityData(nextValidityData);
+    }
+
+    // A field can own several inputs (such as a checkbox or radio group), but only the last-mounted
+    // one wins the shared `inputRef`. Validate against the registry instead so every input counts;
+    // `inputRef` is the fallback only when no inputs are registered.
+    const element = registeredInputs.size > 0 ? findRepresentativeInput(registeredInputs, elementRef.current) : inputRef.current;
+    // A field with no eligible input has no native constraint, but its custom validator still
+    // applies to the logical value at the configured validation boundary.
+
     if (revalidate) {
-      if (state.valid !== false) {
+      if (state.valid !== false || !element) {
         return;
       }
       const currentNativeValidity = element.validity;
@@ -133,39 +150,20 @@ function useFieldValidation(params) {
         // The 'valueMissing' (required) condition has been resolved by the user typing.
         // Temporarily mark the field as valid for this onChange event.
         // Other native errors (e.g., typeMismatch) will be caught by full validation on blur or submit.
-        const nextValidityData = {
-          value,
-          state: {
-            ..._constants.DEFAULT_VALIDITY_STATE,
-            valid: true
-          },
-          error: '',
-          errors: [],
-          initialValue: validityData.initialValue
-        };
-        clearCustomValidity(element, registeredInputs);
-
         // The required value is now present; ignore stale external invalid state for this pass.
-        updateRegisteredFieldValidity(nextValidityData, false);
-        setValidityData(nextValidityData);
+        publishAllValid(element, false);
         return;
       }
 
-      // Value is still missing, or other conditions apply.
-      // Let's use a representation of current validity for isOnlyValueMissing.
-      const currentNativeValidityObject = validityKeys.reduce((acc, key) => {
-        acc[key] = currentNativeValidity[key];
-        return acc;
-      }, {});
-
-      // If it's (still) natively invalid due to something other than just valueMissing,
-      // then bail from this revalidation on change to avoid "scolding" for other errors.
-      if (!currentNativeValidityObject.valid && !isOnlyValueMissing(currentNativeValidityObject)) {
-        return;
+      // A stale custom error can coexist with valueMissing, but defer any other native errors.
+      for (const key of validityKeys) {
+        if (key !== 'valid' && key !== 'valueMissing' && key !== 'customError' && currentNativeValidity[key]) {
+          return;
+        }
       }
 
-      // If valueMissing is still true AND it's the only issue, or if the field is now natively valid,
-      // let it fall through to the main validation logic below.
+      // Value is still missing: publish the current native state so valueMissing and the changed
+      // value are observable immediately. Full custom validation still waits for its boundary.
     }
     function getState(el) {
       const computedState = validityKeys.reduce((acc, key) => {
@@ -195,10 +193,16 @@ function useFieldValidation(params) {
     timeout.clear();
     let result = null;
     let validationErrors = [];
-    const nextState = getState(element);
+
+    // With no representative input the field carries no native constraint, so start from an
+    // all-valid native state and let the custom `validate` result below decide the outcome.
+    const nextState = element ? getState(element) : {
+      ..._constants.DEFAULT_VALIDITY_STATE,
+      valid: true
+    };
     let defaultValidationMessage;
     const isValidatingOnChange = shouldValidateOnChange();
-    if (element.validationMessage && !isValidatingOnChange) {
+    if (element && element.validationMessage && !isValidatingOnChange) {
       // not validating on change, if there is a `validationMessage` from
       // native validity, set errors and skip calling the custom validate fn
       defaultValidationMessage = element.validationMessage;
@@ -227,20 +231,20 @@ function useFieldValidation(params) {
         nextState.customError = true;
         if (Array.isArray(result)) {
           validationErrors = result;
-          element.setCustomValidity(result.join('\n'));
+          element?.setCustomValidity(result.join('\n'));
         } else if (result) {
           validationErrors = [result];
-          element.setCustomValidity(result);
+          element?.setCustomValidity(result);
         }
       } else if (isValidatingOnChange) {
         // validate function returned no errors, if validating on change
         // we need to clear the custom validity state
         clearCustomValidity(element, registeredInputs);
         nextState.customError = false;
-        if (element.validationMessage) {
+        if (element && element.validationMessage) {
           defaultValidationMessage = element.validationMessage;
           validationErrors = [element.validationMessage];
-        } else if (element.validity.valid && !nextState.valid) {
+        } else if ((!element || element.validity.valid) && !nextState.valid) {
           nextState.valid = true;
         }
       }
@@ -275,8 +279,10 @@ function useFieldValidation(params) {
   return React.useMemo(() => ({
     getValidationProps,
     inputRef,
+    registeredInputs,
     registerInput,
+    getInputControl,
     commit,
     change
-  }), [getValidationProps, registerInput, commit, change]);
+  }), [getValidationProps, registeredInputs, registerInput, getInputControl, commit, change]);
 }