[form] Plans to add onBlur?

[IAlphaOmegaI]

Feature request

Summary

Are there any plans to add onBlur on input components such as select and input?

Motivation

Would be handy with form management if we had an onBlur on each input component. Would also love if it bubbled up to a

parent component but I don't know how possible that is with react's synthetic events.

[mj12albert]

Hey @IAlphaOmegaI onBlur should already work with Input (aka Field.Control) and Select.Trigger, we just didn't explicitly document any standard attributes or event handlers, could you give it a try?

[IAlphaOmegaI]

Hey @mj12albert, yes onBlur is working perfectly fine even on <form /> parent component for <NumberField />, <Select /> and <Input /> that I tested. onChange on <form /> is not triggering when playing with <NumberInput /> through the buttons or at all with <Select />.

Relevant NumberField code:

 <Field className={"group"}>
    <FieldLabel className={"data-invalid:text-error"}>
      {label}
    </FieldLabel>
   <NumberFieldPrimitive.Root
        id={id}
        className="flex flex-col items-start gap-1"
        value={value}
        onValueChange={setValue}
      >
        <NumberFieldPrimitive.ScrubArea className="cursor-ew-resize">
          <label
            htmlFor={id}
            className="cursor-ew-resize font-medium text-foreground text-sm"
          >
            Amount
          </label>
          <NumberFieldPrimitive.ScrubAreaCursor className="drop-shadow-[0_1px_1px_#0008] filter">
            <CursorGrowIcon />
          </NumberFieldPrimitive.ScrubAreaCursor>
        </NumberFieldPrimitive.ScrubArea>
  
        <NumberFieldPrimitive.Group className="flex">
          <NumberFieldPrimitive.Decrement className="flex size-10 select-none items-center justify-center rounded-tl-md rounded-bl-md border border-accent-foreground bg-accent bg-clip-padding text-foreground hover:bg-accent-dimmed active:bg-accent-dimmed">
            <MinusIcon />
          </NumberFieldPrimitive.Decrement>
          <NumberFieldPrimitive.Input className="focus:-outline-offset-1 h-10 w-24 border-accent-foreground border-t border-b text-center text-base text-foreground tabular-nums focus:z-1 focus:outline focus:outline-primary" />
          <NumberFieldPrimitive.Increment className="flex size-10 select-none items-center justify-center rounded-tr-md rounded-br-md border border-accent-foreground bg-accent bg-clip-padding text-foreground hover:bg-accent-dimmed active:bg-accent-dimmed">
            <PlusIcon />
          </NumberFieldPrimitive.Increment>
        </NumberFieldPrimitive.Group>
      </NumberFieldPrimitive.Root>
      <FieldError />
</Field >

Any plans to look at this? Would make working with forms much much easier.

[mj12albert]

onChange on <form /> is not triggering when playing with <NumberInput />

@IAlphaOmegaI The change event doesn't fire on <form>s: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event

You can refer to this example for how to set up a form: https://master--base-ui.netlify.app/experiments/form

(The source: https://github.com/mui/base-ui/blob/master/docs/src/app/(private)/experiments/form.tsx)