@zeno-lib/forms 0.2.2 → 0.4.0

package/src/fields/combobox-field.tsx

@@ -2,12 +2,14 @@
 
 import { describedBy } from "@zeno-lib/forms/lib/aria"
 import { useFieldContext } from "@zeno-lib/forms/lib/contexts"
+import { getEmptyValue } from "@zeno-lib/forms/lib/empty-value"
 import {
   useHideFieldErrors,
   useIsFieldRequired,
+  useIsFieldRequiredBySchema,
   useIsInvalid,
 } from "@zeno-lib/forms/lib/use-is-invalid"
-import type { ReactNode } from "react"
+import { type ReactNode, useId } from "react"
 import {
   Combobox,
   ComboboxContent,
@@ -43,13 +45,17 @@ type ComboboxFieldProps<T = string> = {
   /** Override per-row rendering. Default: plain `<ComboboxItem>{label}</ComboboxItem>`. */
   renderItem?: (item: T) => ReactNode
   /**
-   * If `true`, show the clear button when a value is selected. Defaults to
-   * `true` — pass `false` for required-style comboboxes where clearing is
-   * disallowed.
+   * Show the clear button when a value is selected. Defaults to `true` on an
+   * optional field and `false` on a required one (from the schema or
+   * `required`), where clearing could only make the form invalid.
    */
   showClear?: boolean
+  disabled?: boolean
   className?: string
-  /** Force the required `*` indicator on or off. Defaults to schema-derived. */
+  /**
+   * Mark the field required, or not, over the schema. Drives the `*`,
+   * `aria-required` and the `showClear` default.
+   */
   required?: boolean
   /**
    * Controlled input text — pair with `onInputValueChange` for server-side
@@ -82,6 +88,7 @@ function isItemObject(item: unknown): item is ComboboxItemObject<unknown> {
 function ComboboxField<T = string>({
   className,
   description,
+  disabled,
   emptyMessage = "No results.",
   filter,
   inputValue,
@@ -92,40 +99,49 @@ function ComboboxField<T = string>({
   placeholder,
   renderItem,
   required,
-  showClear = true,
+  showClear,
 }: ComboboxFieldProps<T>) {
   const field = useFieldContext()
-  const errorId = `${field.name}-error`
-  const descriptionId = `${field.name}-description`
+  const id = useId()
+  const errorId = `${id}-error`
+  const descriptionId = `${id}-description`
   const isInvalid = useIsInvalid(field)
   const hideErrors = useHideFieldErrors(field)
   const showError = isInvalid && !hideErrors
   const schemaRequired = useIsFieldRequired(field)
   const isRequired = required ?? schemaRequired
+  const schemaRequiresValue = useIsFieldRequiredBySchema(field)
+  const requiresValue = required ?? schemaRequiresValue
+  const canClear = showClear ?? !requiresValue
 
   const fieldValue = field.state.value
-  const hasObjectItems = items.some(isItemObject)
-  const value = hasObjectItems
-    ? ((items.find((item) => isItemObject(item) && item.value === fieldValue) ??
-        null) as T | null)
-    : ((fieldValue ?? null) as T | null)
+  // Base UI shows the value it gets as text, so a stored id whose item isn't
+  // in `items` (options still loading, or a search that dropped it) would
+  // show raw. Only a plain string or number item is its own label.
+  const match = items.find(
+    (item) => (isItemObject(item) ? item.value : item) === fieldValue
+  )
+  const plainItems = items.length > 0 && !items.some(isItemObject)
+  const value = (match ??
+    (plainItems ? (fieldValue ?? null) : null)) as T | null
 
   return (
     <Field data-field={field.name} data-invalid={isInvalid}>
       {label && (
-        <FieldLabel htmlFor={field.name}>
+        <FieldLabel htmlFor={id}>
           {label}
           {isRequired && <RequiredIndicator />}
         </FieldLabel>
       )}
       <Combobox
+        disabled={disabled}
         filter={filter}
         inputValue={inputValue}
         items={items}
         onInputValueChange={onInputValueChange}
         onValueChange={(next) => {
           if (next === null) {
-            field.handleChange(undefined)
+            field.handleChange(getEmptyValue(field, undefined))
             return
           }
           field.handleChange(isItemObject(next) ? next.value : next)
@@ -138,12 +154,14 @@ function ComboboxField<T = string>({
             [showError, errorId]
           )}
           aria-invalid={isInvalid || undefined}
+          aria-required={requiresValue || undefined}
           className={className}
-          id={field.name}
+          disabled={disabled}
+          id={id}
           name={field.name}
           onBlur={field.handleBlur}
           placeholder={placeholder}
-          showClear={showClear && value !== null && value !== "" && !loading}
+          showClear={canClear && value !== null && value !== "" && !loading}
         >
           {loading && (
             <InputGroupAddon align="inline-end">

package/src/fields/date-picker-field.tsx

@@ -2,12 +2,14 @@
 
 import { describedBy } from "@zeno-lib/forms/lib/aria"
 import { useFieldContext } from "@zeno-lib/forms/lib/contexts"
+import { getEmptyValue } from "@zeno-lib/forms/lib/empty-value"
 import {
   useHideFieldErrors,
   useIsFieldRequired,
+  useIsFieldRequiredBySchema,
   useIsInvalid,
 } from "@zeno-lib/forms/lib/use-is-invalid"
-import type { ComponentProps, ReactNode } from "react"
+import { type ComponentProps, type ReactNode, useId, useRef } from "react"
 import { buttonVariants } from "@/components/ui/button"
 import { Calendar } from "@/components/ui/calendar"
 import {
@@ -35,8 +37,15 @@ type DatePickerFieldProps = {
   formatValue?: (date: Date) => string
   triggerClassName?: string
   /** Pass-through to the underlying `<Calendar>` (e.g. `disabled`, `locale`). */
-  calendarProps?: Omit<CalendarProps, "mode" | "onSelect" | "selected">
-  /** Force the required `*` indicator on or off. Defaults to schema-derived. */
+  calendarProps?: Omit<
+    CalendarProps,
+    "mode" | "onSelect" | "required" | "selected"
+  >
+  disabled?: boolean
+  /**
+   * Mark the field required, or not, over the schema. A required date shows
+   * the `*`, and picking its selected day again keeps it instead of clearing.
+   */
   required?: boolean
 }
 
@@ -53,6 +62,7 @@ function defaultFormat(date: Date): string {
 function DatePickerField({
   calendarProps,
   description,
+  disabled,
   formatValue = defaultFormat,
   label,
   placeholder = FALLBACK_PLACEHOLDER,
@@ -60,13 +70,20 @@ function DatePickerField({
   triggerClassName,
 }: DatePickerFieldProps) {
   const field = useFieldContext<Date | undefined>()
-  const errorId = `${field.name}-error`
-  const descriptionId = `${field.name}-description`
+  // Opening the popover moves focus into it, so the trigger's blur would mark
+  // the field touched, and show a required error, before a day is picked.
+  // The field is touched once the popover closes, or focus leaves it closed.
+  const isOpen = useRef<boolean>(false)
+  const id = useId()
+  const errorId = `${id}-error`
+  const descriptionId = `${id}-description`
   const isInvalid = useIsInvalid(field)
   const hideErrors = useHideFieldErrors(field)
   const showError = isInvalid && !hideErrors
   const schemaRequired = useIsFieldRequired(field)
   const isRequired = required ?? schemaRequired
+  const schemaRequiresValue = useIsFieldRequiredBySchema(field)
+  const requiresValue = required ?? schemaRequiresValue
 
   const { value } = field.state
   const empty = !value
@@ -74,12 +91,19 @@ function DatePickerField({
   return (
     <Field data-field={field.name} data-invalid={isInvalid}>
       {label && (
-        <FieldLabel htmlFor={field.name}>
+        <FieldLabel htmlFor={id}>
           {label}
           {isRequired && <RequiredIndicator />}
         </FieldLabel>
       )}
-      <Popover>
+      <Popover
+        onOpenChange={(open) => {
+          isOpen.current = open
+          if (!open) {
+            field.handleBlur()
+          }
+        }}
+      >
         <PopoverTrigger
           aria-describedby={describedBy(
             [description, descriptionId],
@@ -92,11 +116,13 @@ function DatePickerField({
             triggerClassName
           )}
           data-empty={empty || undefined}
-          id={field.name}
-          // Base UI's Popover handles open state — we still need blur on the
-          // form's reactive store. Passing onBlur here mirrors how `<select>`
-          // commits on close.
-          onBlur={field.handleBlur}
+          disabled={disabled}
+          id={id}
+          onBlur={() => {
+            if (!isOpen.current) {
+              field.handleBlur()
+            }
+          }}
         >
           <CalendarIcon />
           {empty ? <span>{placeholder}</span> : formatValue(value)}
@@ -104,7 +130,10 @@ function DatePickerField({
         <PopoverContent className="w-auto p-0">
           <Calendar
             mode="single"
-            onSelect={(next) => field.handleChange(next)}
+            onSelect={(next: Date | undefined) =>
+              field.handleChange(next ?? getEmptyValue(field, undefined))
+            }
+            required={requiresValue}
             selected={value}
             {...calendarProps}
           />

package/src/fields/email-field.tsx

@@ -2,16 +2,24 @@ import { InputField, type InputFieldProps } from "./input-field"
 
 type EmailFieldProps = Omit<InputFieldProps, "inputMode" | "type">
 
+// An address is typed as is: no capital first letter, autocorrect or spell
+// check.
 function EmailField({
+  autoCapitalize = "none",
   autoComplete = "email",
+  autoCorrect = "off",
   label = "Email",
+  spellCheck = false,
   ...props
 }: EmailFieldProps) {
   return (
     <InputField
+      autoCapitalize={autoCapitalize}
       autoComplete={autoComplete}
+      autoCorrect={autoCorrect}
       inputMode="email"
       label={label}
+      spellCheck={spellCheck}
       type="email"
       {...props}
     />

package/src/fields/input-field.tsx

@@ -5,9 +5,10 @@ import { useFieldContext } from "@zeno-lib/forms/lib/contexts"
 import {
   useHideFieldErrors,
   useIsFieldRequired,
+  useIsFieldRequiredBySchema,
   useIsInvalid,
 } from "@zeno-lib/forms/lib/use-is-invalid"
-import { Children, type ComponentProps, type ReactNode } from "react"
+import { Children, type ComponentProps, type ReactNode, useId } from "react"
 import {
   Field,
   FieldDescription,
@@ -26,8 +27,8 @@ type InputFieldProps = Omit<
   description?: ReactNode
   label?: ReactNode
   /**
-   * Force the required `*` indicator on or off for this field. When omitted,
-   * the value is derived from the form's schema.
+   * Mark the field required, or not, over the schema. Drives the `*` and
+   * `aria-required`.
    */
   required?: boolean
 }
@@ -40,14 +41,17 @@ function InputField({
   ...props
 }: InputFieldProps) {
   const field = useFieldContext<string>()
-  const errorId = `${field.name}-error`
-  const descriptionId = `${field.name}-description`
+  const id = useId()
+  const errorId = `${id}-error`
+  const descriptionId = `${id}-description`
   const isInvalid = useIsInvalid(field)
   const hideErrors = useHideFieldErrors(field)
   const showError = isInvalid && !hideErrors
   const hasAddons = Children.count(children) > 0
   const schemaRequired = useIsFieldRequired(field)
   const isRequired = required ?? schemaRequired
+  const schemaRequiresValue = useIsFieldRequiredBySchema(field)
+  const requiresValue = required ?? schemaRequiresValue
 
   const inputProps = {
     "aria-describedby": describedBy(
@@ -55,7 +59,8 @@ function InputField({
       [showError, errorId]
     ),
     "aria-invalid": isInvalid || undefined,
-    id: field.name,
+    "aria-required": requiresValue || undefined,
+    id,
     name: field.name,
     onBlur: field.handleBlur,
     onChange: (event: React.ChangeEvent<HTMLInputElement>) =>
@@ -67,7 +72,7 @@ function InputField({
   return (
     <Field data-field={field.name} data-invalid={isInvalid}>
       {label && (
-        <FieldLabel htmlFor={field.name}>
+        <FieldLabel htmlFor={id}>
           {label}
           {isRequired && <RequiredIndicator />}
         </FieldLabel>

package/src/fields/money-field.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import { useFieldContext } from "@zeno-lib/forms/lib/contexts"
+import { getEmptyValue } from "@zeno-lib/forms/lib/empty-value"
 import { useFormattedNumber } from "@zeno-lib/forms/lib/use-formatted-number"
 import { type ReactNode, useMemo } from "react"
 import { InputGroupAddon, InputGroupText } from "@/components/ui/input-group"
@@ -95,7 +96,8 @@ function MoneyField({
     maximumFractionDigits: digits,
     min,
     onBlur: field.handleBlur,
-    onValueChange: (next) => field.handleChange(next),
+    onValueChange: (next) =>
+      field.handleChange(next ?? getEmptyValue(field, null)),
     padFraction: true,
     value: field.state.value,
   })

package/src/fields/multi-select-field.tsx

@@ -5,10 +5,11 @@ import { useFieldContext } from "@zeno-lib/forms/lib/contexts"
 import {
   useHideFieldErrors,
   useIsFieldRequired,
+  useIsFieldRequiredBySchema,
   useIsInvalid,
 } from "@zeno-lib/forms/lib/use-is-invalid"
 import { XIcon } from "lucide-react"
-import type { ReactNode } from "react"
+import { type ReactNode, useId } from "react"
 import { Button } from "@/components/ui/button"
 import {
   Combobox,
@@ -56,7 +57,10 @@ type MultiSelectFieldProps<T = string> = {
   clearLabel?: string
   disabled?: boolean
   className?: string
-  /** Force the required `*` indicator on or off. Defaults to schema-derived. */
+  /**
+   * Mark the field required, or not, over the schema. Drives the `*` and
+   * `aria-required`.
+   */
   required?: boolean
 }
 
@@ -96,13 +100,16 @@ function MultiSelectField<T = string>({
 }: MultiSelectFieldProps<T>) {
   const field = useFieldContext<MultiSelectValue<T>[] | null | undefined>()
   const anchor = useComboboxAnchor()
-  const errorId = `${field.name}-error`
-  const descriptionId = `${field.name}-description`
+  const id = useId()
+  const errorId = `${id}-error`
+  const descriptionId = `${id}-description`
   const isInvalid = useIsInvalid(field)
   const hideErrors = useHideFieldErrors(field)
   const showError = isInvalid && !hideErrors
   const schemaRequired = useIsFieldRequired(field)
   const isRequired = required ?? schemaRequired
+  const schemaRequiresValue = useIsFieldRequiredBySchema(field)
+  const requiresValue = required ?? schemaRequiresValue
 
   const values = field.state.value ?? []
   // Map stored values back to item identities, in selection order, so Base UI
@@ -114,7 +121,7 @@ function MultiSelectField<T = string>({
   return (
     <Field data-field={field.name} data-invalid={isInvalid}>
       {label && (
-        <FieldLabel htmlFor={field.name}>
+        <FieldLabel htmlFor={id}>
           {label}
           {isRequired && <RequiredIndicator />}
         </FieldLabel>
@@ -143,7 +150,8 @@ function MultiSelectField<T = string>({
                     [showError, errorId]
                   )}
                   aria-invalid={isInvalid || undefined}
-                  id={field.name}
+                  aria-required={requiresValue || undefined}
+                  id={id}
                   name={field.name}
                   onBlur={field.handleBlur}
                   placeholder={chips.length === 0 ? placeholder : undefined}

package/src/fields/number-field.tsx

@@ -1,15 +1,15 @@
 "use client"
 
 import { useFieldContext } from "@zeno-lib/forms/lib/contexts"
+import { getEmptyValue } from "@zeno-lib/forms/lib/empty-value"
 import type { ChangeEvent } from "react"
 import { InputField, type InputFieldProps } from "./input-field"
 
-type NumberFieldProps = Omit<
-  InputFieldProps,
-  "inputMode" | "onChange" | "type" | "value"
->
+type NumberFieldProps = Omit<InputFieldProps, "onChange" | "type" | "value">
 
-function NumberField(props: NumberFieldProps) {
+// `decimal` keeps the decimal key on phone keypads; pass `numeric` for whole
+// numbers.
+function NumberField({ inputMode = "decimal", ...props }: NumberFieldProps) {
   const field = useFieldContext<number | undefined>()
   const { value } = field.state
   const inputValue =
@@ -18,10 +18,12 @@ function NumberField(props: NumberFieldProps) {
   return (
     <InputField
       {...props}
-      inputMode="numeric"
+      inputMode={inputMode}
       onChange={(event: ChangeEvent<HTMLInputElement>) => {
         const next = event.target.valueAsNumber
-        field.handleChange(Number.isNaN(next) ? undefined : next)
+        field.handleChange(
+          Number.isNaN(next) ? getEmptyValue(field, undefined) : next
+        )
       }}
       type="number"
       value={inputValue}

package/src/fields/otp-field.tsx

@@ -5,9 +5,10 @@ import { useFieldContext } from "@zeno-lib/forms/lib/contexts"
 import {
   useHideFieldErrors,
   useIsFieldRequired,
+  useIsFieldRequiredBySchema,
   useIsInvalid,
 } from "@zeno-lib/forms/lib/use-is-invalid"
-import type { ReactNode } from "react"
+import { type ReactNode, useId } from "react"
 import {
   Field,
   FieldDescription,
@@ -40,7 +41,10 @@ type OtpFieldProps = {
    * you need a separator between segments.
    */
   children?: ReactNode
-  /** Force the required `*` indicator on or off. Defaults to schema-derived. */
+  /**
+   * Mark the field required, or not, over the schema. Drives the `*` and
+   * `aria-required`.
+   */
   required?: boolean
 }
 
@@ -57,18 +61,21 @@ function OtpField({
   required,
 }: OtpFieldProps) {
   const field = useFieldContext<string>()
-  const errorId = `${field.name}-error`
-  const descriptionId = `${field.name}-description`
+  const id = useId()
+  const errorId = `${id}-error`
+  const descriptionId = `${id}-description`
   const isInvalid = useIsInvalid(field)
   const hideErrors = useHideFieldErrors(field)
   const showError = isInvalid && !hideErrors
   const schemaRequired = useIsFieldRequired(field)
   const isRequired = required ?? schemaRequired
+  const schemaRequiresValue = useIsFieldRequiredBySchema(field)
+  const requiresValue = required ?? schemaRequiresValue
 
   return (
     <Field data-field={field.name} data-invalid={isInvalid}>
       {label && (
-        <FieldLabel htmlFor={field.name}>
+        <FieldLabel htmlFor={id}>
           {label}
           {isRequired && <RequiredIndicator />}
         </FieldLabel>
@@ -79,11 +86,12 @@ function OtpField({
           [showError, errorId]
         )}
         aria-invalid={isInvalid || undefined}
+        aria-required={requiresValue || undefined}
         autoFocus={autoFocus}
         className={className}
         containerClassName={containerClassName}
         disabled={disabled}
-        id={field.name}
+        id={id}
         maxLength={maxLength}
         name={field.name}
         onBlur={field.handleBlur}

package/src/fields/percentage-field.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import { useFieldContext } from "@zeno-lib/forms/lib/contexts"
+import { getEmptyValue } from "@zeno-lib/forms/lib/empty-value"
 import { useFormattedNumber } from "@zeno-lib/forms/lib/use-formatted-number"
 import { InputGroupAddon, InputGroupText } from "@/components/ui/input-group"
 import { InputField, type InputFieldProps } from "./input-field"
@@ -54,7 +55,8 @@ function PercentageField({
     maximumFractionDigits: fractionDigits,
     min,
     onBlur: field.handleBlur,
-    onValueChange: (next) => field.handleChange(next),
+    onValueChange: (next) =>
+      field.handleChange(next ?? getEmptyValue(field, null)),
     value: field.state.value,
     ...(isFraction ? { fromDisplay: fromPercent, toDisplay: toPercent } : {}),
   })

package/src/fields/radio-group-field.tsx

@@ -5,6 +5,7 @@ import { useFieldContext } from "@zeno-lib/forms/lib/contexts"
 import {
   useHideFieldErrors,
   useIsFieldRequired,
+  useIsFieldRequiredBySchema,
   useIsInvalid,
 } from "@zeno-lib/forms/lib/use-is-invalid"
 import { type ComponentProps, type ReactNode, useId } from "react"
@@ -24,7 +25,10 @@ type RadioGroupFieldProps = Omit<
 > & {
   description?: ReactNode
   label?: ReactNode
-  /** Force the required `*` indicator on or off. Defaults to schema-derived. */
+  /**
+   * Mark the field required, or not, over the schema. Drives the `*` and
+   * `aria-required`.
+   */
   required?: boolean
 }
 
@@ -35,14 +39,17 @@ function RadioGroupField({
   required,
   ...props
 }: RadioGroupFieldProps) {
-  const field = useFieldContext<string>()
-  const errorId = `${field.name}-error`
-  const descriptionId = `${field.name}-description`
+  const field = useFieldContext()
+  const id = useId()
+  const errorId = `${id}-error`
+  const descriptionId = `${id}-description`
   const isInvalid = useIsInvalid(field)
   const hideErrors = useHideFieldErrors(field)
   const showError = isInvalid && !hideErrors
   const schemaRequired = useIsFieldRequired(field)
   const isRequired = required ?? schemaRequired
+  const schemaRequiresValue = useIsFieldRequiredBySchema(field)
+  const requiresValue = required ?? schemaRequiresValue
 
   return (
     <Field data-field={field.name} data-invalid={isInvalid}>
@@ -58,9 +65,10 @@ function RadioGroupField({
           [showError, errorId]
         )}
         aria-invalid={isInvalid || undefined}
+        aria-required={requiresValue || undefined}
         name={field.name}
-        onValueChange={(value) => field.handleChange(String(value))}
-        value={field.state.value ?? ""}
+        onValueChange={(value) => field.handleChange(value)}
+        value={field.state.value ?? null}
         {...props}
       >
         {children}

package/src/fields/select-field.tsx

@@ -5,10 +5,11 @@ import { useFieldContext } from "@zeno-lib/forms/lib/contexts"
 import {
   useHideFieldErrors,
   useIsFieldRequired,
+  useIsFieldRequiredBySchema,
   useIsInvalid,
 } from "@zeno-lib/forms/lib/use-is-invalid"
 import type { ComponentProps, ReactNode } from "react"
-import { Children, isValidElement, useMemo } from "react"
+import { Children, isValidElement, useId, useMemo, useRef } from "react"
 import {
   Field,
   FieldDescription,
@@ -31,7 +32,10 @@ type SelectFieldProps = Omit<
   description?: ReactNode
   label?: ReactNode
   placeholder?: string
-  /** Force the required `*` indicator on or off. Defaults to schema-derived. */
+  /**
+   * Mark the field required, or not, over the schema. Drives the `*` and
+   * `aria-required`.
+   */
   required?: boolean
   triggerClassName?: string
   triggerSize?: ComponentProps<typeof SelectTrigger>["size"]
@@ -41,6 +45,7 @@ function SelectField({
   children,
   description,
   label,
+  onOpenChange,
   placeholder,
   required,
   triggerClassName,
@@ -48,13 +53,20 @@ function SelectField({
   ...props
 }: SelectFieldProps) {
   const field = useFieldContext()
-  const errorId = `${field.name}-error`
-  const descriptionId = `${field.name}-description`
+  // Opening the popup moves focus into it, so the trigger's blur would mark
+  // the field touched, and show a required error, before anything is picked.
+  // The field is touched once the popup closes, or focus leaves it closed.
+  const isOpen = useRef<boolean>(false)
+  const id = useId()
+  const errorId = `${id}-error`
+  const descriptionId = `${id}-description`
   const isInvalid = useIsInvalid(field)
   const hideErrors = useHideFieldErrors(field)
   const showError = isInvalid && !hideErrors
   const schemaRequired = useIsFieldRequired(field)
   const isRequired = required ?? schemaRequired
+  const schemaRequiresValue = useIsFieldRequiredBySchema(field)
+  const requiresValue = required ?? schemaRequiresValue
 
   const items = useMemo(() => {
     const map: Record<string, ReactNode> = {}
@@ -72,7 +84,7 @@ function SelectField({
   return (
     <Field data-field={field.name} data-invalid={isInvalid}>
       {label && (
-        <FieldLabel htmlFor={field.name}>
+        <FieldLabel htmlFor={id}>
           {label}
           {isRequired && <RequiredIndicator />}
         </FieldLabel>
@@ -80,6 +92,13 @@ function SelectField({
       <Select
         items={items}
         name={field.name}
+        onOpenChange={(open, eventDetails) => {
+          isOpen.current = open
+          if (!open) {
+            field.handleBlur()
+          }
+          onOpenChange?.(open, eventDetails)
+        }}
         onValueChange={(value) => field.handleChange(value)}
         value={field.state.value ?? null}
         {...props}
@@ -90,9 +109,14 @@ function SelectField({
             [showError, errorId]
           )}
           aria-invalid={isInvalid || undefined}
+          aria-required={requiresValue || undefined}
           className={triggerClassName}
-          id={field.name}
-          onBlur={field.handleBlur}
+          id={id}
+          onBlur={() => {
+            if (!isOpen.current) {
+              field.handleBlur()
+            }
+          }}
           size={triggerSize}
         >
           <SelectValue placeholder={placeholder} />