Need more events regarding user inputs (focus, blur, change)

[dlikhten]

Without events like focus, blur, and input change (even if invalid) it is challenging to build a full form experience.

So far I had to use a hack to try to work around the lack of events:

useEffect(() => {
    const input = theRef.current?.querySelector('input');

    // HACK: the Datepicker doesn't callback on invalid dates
    const callback = (e: any) => {
      if (!dayjs(e.target.value).isValid()) {
        setValue(e.target.value);
      }
    };
    const blur = (e: any) => {
      setTouched(true);
    };
    if (input) {
      input.addEventListener('change', callback);
      input.addEventListener('blur', blur);
    }
    return () => {
      input?.removeEventListener('change', callback);
      input?.removeEventListener('blur', blur);
    };
  }, [setTouched, setValue]);

this allows me to trigger validation on blur, allows me to set invalid values to run against my validation code, etc.

I feel like this sort of stuff should be cooked into the component.

[khoilen]

Could you show all code of this component

[GasparAdragna]

Any update on this? Or @dlikhten could you share some more of the code you have, i cant make it work