fix: Wrap disable html validation toggle in Boolean (#219)

KammererTob · web-flow · commit 3dda655b780f · 2025-09-18T11:14:36.000+02:00
* fix: add wrapper to force boolean to undefined

* chore: forgot changeset
diff --git a/.changeset/new-wolves-dance.md b/.changeset/new-wolves-dance.md
@@ -0,0 +1,5 @@
+---
+'@formwerk/core': patch
+---
+
+Change type for disableHtmlValidation to Boolean to prevent Vue compiling undefined to false
diff --git a/packages/core/src/types/common.ts b/packages/core/src/types/common.ts
@@ -107,5 +107,3 @@ export type MaybeGetter<T> = T | Getter<T>;
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type DangerousAny = any;
-
-export type TransparentWrapper<T> = T;
diff --git a/packages/core/src/useCheckbox/useCheckbox.ts b/packages/core/src/useCheckbox/useCheckbox.ts
@@ -8,7 +8,6 @@ import {
   Reactivify,
   RovingTabIndex,
   StandardSchema,
-  TransparentWrapper,
 } from '../types';
 import { useLabel, useErrorMessage } from '../a11y';
 import { CheckboxGroupContext, CheckboxGroupKey } from './useCheckboxGroup';
@@ -80,7 +79,8 @@ export interface CheckboxProps<TValue = boolean> {
   /**
    * Whether HTML5 validation should be disabled for this checkbox.
    */
-  disableHtmlValidation?: TransparentWrapper<boolean>;
+  // eslint-disable-next-line @typescript-eslint/no-wrapper-object-types
+  disableHtmlValidation?: Boolean;
 }
 
 export interface CheckboxDomInputProps extends AriaLabelableProps, InputBaseAttributes {
diff --git a/packages/core/src/useCheckbox/useCheckboxGroup.ts b/packages/core/src/useCheckbox/useCheckboxGroup.ts
@@ -24,7 +24,6 @@ import {
 import { useLocale } from '../i18n';
 import { FormField, useFormField, exposeField } from '../useFormField';
 import { FieldTypePrefixes } from '../constants';
-import { TransparentWrapper } from '../types';
 
 export type CheckboxGroupValue<TCheckbox> = TCheckbox[];
 
@@ -108,7 +107,8 @@ export interface CheckboxGroupProps<TCheckbox = unknown> {
   /**
    * Whether HTML5 validation should be disabled for this checkbox group.
    */
-  disableHtmlValidation?: TransparentWrapper<boolean>;
+  // eslint-disable-next-line @typescript-eslint/no-wrapper-object-types
+  disableHtmlValidation?: Boolean;
 }
 
 interface CheckboxGroupDomProps extends AriaLabelableProps, AriaDescribableProps, AriaValidatableProps {
diff --git a/packages/core/src/useComboBox/useComboBox.ts b/packages/core/src/useComboBox/useComboBox.ts
@@ -20,7 +20,6 @@ import { useInputValidity } from '../validation';
 import { FilterFn } from '../collections';
 import { useControlButtonProps } from '../helpers/useControlButtonProps';
 import { registerField } from '@formwerk/devtools';
-import { TransparentWrapper } from '../types';
 
 export interface ComboBoxProps<TOption, TValue = TOption> {
   /**
@@ -81,7 +80,8 @@ export interface ComboBoxProps<TOption, TValue = TOption> {
   /**
    * Whether to disable HTML5 validation.
    */
-  disableHtmlValidation?: TransparentWrapper<boolean>;
+  // eslint-disable-next-line @typescript-eslint/no-wrapper-object-types
+  disableHtmlValidation?: Boolean;
 
   /**
    * Whether to open the popup when the input is focused.
diff --git a/packages/core/src/useForm/useForm.ts b/packages/core/src/useForm/useForm.ts
@@ -1,7 +1,7 @@
 import { inject, InjectionKey, MaybeRefOrGetter, onMounted, provide, reactive, readonly, Ref, ref } from 'vue';
 import type { StandardSchemaV1 } from '@standard-schema/spec';
 import { registerForm } from '@formwerk/devtools';
-import { cloneDeep, useUniqId, warn } from '../utils/common';
+import { cloneDeep, toPrimitiveBooleanValue, useUniqId, warn } from '../utils/common';
 import {
   FormObject,
   MaybeAsync,
@@ -28,7 +28,6 @@ import { FieldTypePrefixes } from '../constants';
 import { appendToFormData, clearFormData } from '../utils/formData';
 import { Arrayable, PartialDeep } from 'type-fest';
 import { createDisabledContext } from '../helpers/createDisabledContext';
-import { TransparentWrapper } from '../types';
 
 interface _FormProps<TInput extends FormObject> {
   /**
@@ -49,7 +48,8 @@ interface _FormProps<TInput extends FormObject> {
   /**
    * Whether HTML5 validation should be disabled for this form.
    */
-  disableHtmlValidation?: TransparentWrapper<boolean>;
+  // eslint-disable-next-line @typescript-eslint/no-wrapper-object-types
+  disableHtmlValidation?: Boolean;
 
   /**
    * Whether the form is disabled.
@@ -262,7 +262,8 @@ export function useForm<
 
   const id = props?.id || useUniqId(FieldTypePrefixes.Form);
   const isDisabled = createDisabledContext(props?.disabled);
-  const isHtmlValidationDisabled = () => props?.disableHtmlValidation ?? getConfig().disableHtmlValidation;
+  const isHtmlValidationDisabled = () =>
+    toPrimitiveBooleanValue(props?.disableHtmlValidation) ?? getConfig().disableHtmlValidation;
   const values = reactive(cloneDeep(valuesSnapshot.originals.value)) as PartialDeep<TResolvedInput>;
   const touched = reactive(cloneDeep(touchedSnapshot.originals.value)) as TouchedSchema<TResolvedInput>;
   const dirty = reactive(cloneDeep(dirtySnapshot.originals.value)) as DirtySchema<TResolvedInput>;
diff --git a/packages/core/src/useFormGroup/useFormGroup.ts b/packages/core/src/useFormGroup/useFormGroup.ts
@@ -9,15 +9,14 @@ import {
   StandardSchema,
   ValidationResult,
 } from '../types';
-import { normalizeProps, useUniqId, warn, useCaptureProps } from '../utils/common';
+import { normalizeProps, useUniqId, warn, useCaptureProps, toPrimitiveBooleanValue } from '../utils/common';
 import { FormKey } from '../useForm';
 import { useValidationProvider } from '../validation/useValidationProvider';
 import { FormValidationMode } from '../useForm/formContext';
 import { prefixPath as _prefixPath } from '../utils/path';
 import { getConfig } from '../config';
 import { createPathPrefixer, usePathPrefixer } from '../helpers/usePathPrefixer';
 import { createDisabledContext } from '../helpers/createDisabledContext';
-import { TransparentWrapper } from '../types';
 
 export interface FormGroupProps<TInput extends FormObject = FormObject, TOutput extends FormObject = TInput> {
   /**
@@ -43,7 +42,8 @@ export interface FormGroupProps<TInput extends FormObject = FormObject, TOutput
   /**
    * Whether HTML5 validation should be disabled for this form group.
    */
-  disableHtmlValidation?: TransparentWrapper<boolean>;
+  // eslint-disable-next-line @typescript-eslint/no-wrapper-object-types
+  disableHtmlValidation?: Boolean;
 }
 
 interface GroupProps extends AriaLabelableProps {
@@ -84,7 +84,9 @@ export function useFormGroup<TInput extends FormObject = FormObject, TOutput ext
   const parentGroup = inject(FormGroupKey, null);
   const isDisabled = createDisabledContext(props.disabled);
   const isHtmlValidationDisabled = () =>
-    toValue(props.disableHtmlValidation) ?? form?.isHtmlValidationDisabled() ?? getConfig().disableHtmlValidation;
+    toPrimitiveBooleanValue(props.disableHtmlValidation) ??
+    form?.isHtmlValidationDisabled() ??
+    getConfig().disableHtmlValidation;
   const { validate, onValidationDispatch, defineValidationRequest, onValidationDone, dispatchValidateDone } =
     useValidationProvider({
       getValues: () => getValue(),
diff --git a/packages/core/src/useNumberField/useNumberField.ts b/packages/core/src/useNumberField/useNumberField.ts
@@ -27,7 +27,6 @@ import { exposeField, useFormField } from '../useFormField';
 import { FieldTypePrefixes } from '../constants';
 import { useEventListener } from '../helpers/useEventListener';
 import { registerField } from '@formwerk/devtools';
-import { TransparentWrapper } from '../types';
 
 export interface NumberInputDOMAttributes {
   name?: string;
@@ -136,7 +135,8 @@ export interface NumberFieldProps {
   /**
    * Whether to disable HTML5 form validation.
    */
-  disableHtmlValidation?: TransparentWrapper<boolean>;
+  // eslint-disable-next-line @typescript-eslint/no-wrapper-object-types
+  disableHtmlValidation?: Boolean;
 }
 
 export function useNumberField(_props: Reactivify<NumberFieldProps, 'schema'>) {
diff --git a/packages/core/src/useOtpField/useOtpField.ts b/packages/core/src/useOtpField/useOtpField.ts
@@ -10,7 +10,6 @@ import { OtpSlotProps } from './useOtpSlot';
 import { registerField } from '@formwerk/devtools';
 import { DEFAULT_MASK, isValueAccepted } from './utils';
 import { blockEvent } from '../utils/events';
-import { TransparentWrapper } from '../types';
 
 export interface OtpFieldProps {
   /**
@@ -76,7 +75,8 @@ export interface OtpFieldProps {
   /**
    * Whether to disable HTML validation.
    */
-  disableHtmlValidation?: TransparentWrapper<boolean>;
+  // eslint-disable-next-line @typescript-eslint/no-wrapper-object-types
+  disableHtmlValidation?: Boolean;
 
   /**
    * The prefix of the OTP field. If you prefix your codes with a character, you can set it here (e.g "G-").
diff --git a/packages/core/src/useRadio/useRadioGroup.ts b/packages/core/src/useRadio/useRadioGroup.ts
@@ -23,7 +23,6 @@ import {
 import { useLocale } from '../i18n';
 import { useFormField, exposeField } from '../useFormField';
 import { FieldTypePrefixes } from '../constants';
-import { TransparentWrapper } from '../types';
 
 export interface RadioGroupContext<TValue> {
   name: string;
@@ -102,7 +101,8 @@ export interface RadioGroupProps<TValue = string> {
   /**
    * Whether to disable HTML5 form validation.
    */
-  disableHtmlValidation?: TransparentWrapper<boolean>;
+  // eslint-disable-next-line @typescript-eslint/no-wrapper-object-types
+  disableHtmlValidation?: Boolean;
 }
 
 interface RadioGroupDomProps extends AriaLabelableProps, AriaDescribableProps, AriaValidatableProps {
diff --git a/packages/core/src/useSearchField/useSearchField.ts b/packages/core/src/useSearchField/useSearchField.ts
@@ -22,7 +22,6 @@ import { useLabel, useErrorMessage } from '../a11y';
 import { useFormField, exposeField } from '../useFormField';
 import { FieldTypePrefixes } from '../constants';
 import { registerField } from '@formwerk/devtools';
-import { TransparentWrapper } from '../types';
 
 export interface SearchInputDOMAttributes extends TextInputBaseAttributes {
   type?: 'search';
@@ -116,7 +115,8 @@ export interface SearchFieldProps {
   /**
    * Whether to disable HTML5 form validation.
    */
-  disableHtmlValidation?: TransparentWrapper<boolean>;
+  // eslint-disable-next-line @typescript-eslint/no-wrapper-object-types
+  disableHtmlValidation?: Boolean;
 }
 
 export function useSearchField(_props: Reactivify<SearchFieldProps, 'onSubmit' | 'schema'>) {
diff --git a/packages/core/src/useSwitch/useSwitch.ts b/packages/core/src/useSwitch/useSwitch.ts
@@ -23,7 +23,6 @@ import { useFormField, exposeField } from '../useFormField';
 import { FieldTypePrefixes } from '../constants';
 import { useInputValidity } from '../validation';
 import { registerField } from '@formwerk/devtools';
-import { TransparentWrapper } from '../types';
 
 export interface SwitchDomInputProps
   extends InputBaseAttributes,
@@ -93,7 +92,8 @@ export type SwitchProps<TValue = boolean> = {
   /**
    * Whether to disable HTML5 validation.
    */
-  disableHtmlValidation?: TransparentWrapper<boolean>;
+  // eslint-disable-next-line @typescript-eslint/no-wrapper-object-types
+  disableHtmlValidation?: Boolean;
 };
 
 export function useSwitch<TValue = boolean>(_props: Reactivify<SwitchProps<TValue>, 'schema'>) {
diff --git a/packages/core/src/useTextField/useTextField.ts b/packages/core/src/useTextField/useTextField.ts
@@ -15,7 +15,6 @@ import { useLabel, useErrorMessage } from '../a11y';
 import { useFormField, exposeField } from '../useFormField';
 import { FieldTypePrefixes } from '../constants';
 import { StandardSchema } from '../types';
-import { TransparentWrapper } from '../types';
 
 export type TextInputDOMType = 'text' | 'password' | 'email' | 'number' | 'tel' | 'url';
 
@@ -111,7 +110,8 @@ export interface TextFieldProps {
   /**
    * Whether to disable HTML5 validation.
    */
-  disableHtmlValidation?: TransparentWrapper<boolean>;
+  // eslint-disable-next-line @typescript-eslint/no-wrapper-object-types
+  disableHtmlValidation?: Boolean;
 }
 
 export function useTextField(_props: Reactivify<TextFieldProps, 'schema'>) {
diff --git a/packages/core/src/utils/common.ts b/packages/core/src/utils/common.ts
@@ -472,3 +472,13 @@ export function lowPriority<TValue>(value: TValue) {
 export function isLowPriority<TValue = unknown>(value: unknown): value is LowPriority<TValue> {
   return isObject(value) && '__isFwLowPriority__' in value;
 }
+
+// eslint-disable-next-line @typescript-eslint/no-wrapper-object-types
+export function toPrimitiveBooleanValue(val: MaybeRefOrGetter<Boolean | undefined>): boolean | undefined {
+  const unwrapped = toValue(val);
+
+  if (typeof unwrapped === 'string' && unwrapped === '') {
+    return true;
+  }
+  return unwrapped?.valueOf();
+}
diff --git a/packages/core/src/validation/useInputValidity.ts b/packages/core/src/validation/useInputValidity.ts
@@ -3,17 +3,17 @@ import { EventExpression, useEventListener } from '../helpers/useEventListener';
 import { type FormContext, FormKey } from '../useForm';
 import { Arrayable, Maybe, ValidationResult } from '../types';
 import { FormField } from '../useFormField';
-import { isInputElement, normalizeArrayable, warn } from '../utils/common';
+import { isInputElement, normalizeArrayable, toPrimitiveBooleanValue, warn } from '../utils/common';
 import { FormGroupContext, FormGroupKey } from '../useFormGroup';
 import { getConfig } from '../config';
 import { checkLocaleMismatch } from '../i18n';
-import { TransparentWrapper } from '../types';
 
 type ElementReference = Ref<Arrayable<Maybe<HTMLElement>>>;
 
 interface InputValidityOptions {
   inputEl?: ElementReference;
-  disableHtmlValidation?: MaybeRefOrGetter<TransparentWrapper<boolean> | undefined>;
+  // eslint-disable-next-line @typescript-eslint/no-wrapper-object-types
+  disableHtmlValidation?: MaybeRefOrGetter<Boolean | undefined>;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   field: FormField<any>;
   events?: MaybeRefOrGetter<Arrayable<EventExpression>>;
@@ -27,7 +27,7 @@ export function useInputValidity(opts: InputValidityOptions) {
   const validityDetails = shallowRef<ValidityState>();
   useMessageCustomValiditySync(errorMessage, opts.inputEl, form, formGroup);
   const isHtmlValidationDisabled = () =>
-    toBooleanValue(opts.disableHtmlValidation) ??
+    toPrimitiveBooleanValue(opts.disableHtmlValidation) ??
     (formGroup || form)?.isHtmlValidationDisabled() ??
     getConfig().disableHtmlValidation;
 
@@ -147,15 +147,6 @@ export function useInputValidity(opts: InputValidityOptions) {
   };
 }
 
-function toBooleanValue(val: MaybeRefOrGetter<TransparentWrapper<boolean> | undefined>): boolean | undefined {
-  const unwrapped = toValue(val);
-
-  if (typeof unwrapped === 'string' && unwrapped === '') {
-    return true;
-  }
-  return unwrapped;
-}
-
 /**
  * Syncs the message with the input's native validation message.
  */

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@formwerk/core': patch
 +---
++
 +Change type for disableHtmlValidation to Boolean to prevent Vue compiling undefined to false