Add value trim option to useForm hook

[present-g]

Hello, everyone!)

I think it would be cool to add an option to trim spaces, for example:

const SomeComponent: FC = () => {
    const { register, watch } = useForm({ trim: true });

    // show value without spaces
    console.log(watch("someInput"))

    return <Input {...register("someInput", {
        // Or maybe here better place for this option
        trim: true,
        pattern: {
             // Here we need trimmed value
             value: /\s/g,
             message: "Invalid format"
    }}} />
}

[bluebill1049]

Thanks for the idea and suggestion, I think register currently it's already doing a lot of work, honest I prefer to even reduce some of the functionality because those types of trimming or masking probably better sit at the component level and it's the right abstraction there instead doing more "magic" inside register.

[present-g]

Hi, thanks for the reply!

Maybe you are right, but this is the only possibility to do trim in one place for me.

Of course, it is better to do the trim before sending the data, and I do it, but if there is a RegEx on the fields that I don't control (comes from API), the data will simply not be sent.

Trim is standard operation for form fields because the user can enter: " \s\s\sJohn Doe\s\s\s", so I decided to suggest :)

[bluebill1049]

Thanks for the suggestion, always appreciate those to improve and uplift the library, if you have a strong opinion on this send us a feature request and we can see if users are voting to include this feature. My personal opinion is still valid on the original feedback which I gave above, but happy to refer to everyone's feedback.

[leapful]

@present-g @bluebill1049

You can create a custom hook by using useForm to apply trimming.

For example:

// useCustomForm.ts

export interface UseCustomFormProps extends UseFormProps {
   trim?: boolean;
}

export const useCustomForm = ({ trim, ...props }: UseCustomFormProps) => {
   const methods = useForm(props);

  const customRegister = (name: string, registerOptions?: RegisterOptions) => {
      const field = method.register(name, registerOptions);
      
     const customOnChange: ChangeHandler = async (event) => {
        const target = event.target;

        if (trim && typeof target.value === 'string' && target.value) {
            target.value = target.value.trim();
        }

        field.onChange(event);
     }


      return {  ...field, onChange: customOnChange };
  }

  return { ...methods, register: customRegister }
}

[bluebill1049]

That's cool!

[jordan-rigo]

If You put the methods returned by useCustomForm inside a useEffect dependency array, and call any function on it, you are going to have an infinite loop problem, which you do not get if you dont wrap the basic useForm.

I tried to solve it by wrapping useMemo(() => ({ ...methods, register: customRegister }),[methods])

But in that case the form did not work properly.

Any idea how to address this issue?

[volpi-indagare]

Yes. The return from useCustomForm creates the infinite re-render when used as a dependency, because every single time the hook is part of a re-render cycle, its return is going to have a brand-new object ID because the customRegister function is re-evaluated/built each re-render cycle.

To fix this, you should wrap customRegister with a useCallback with a dep on methods, and trim.

[Criedor]

Hi!
I was trying to use your example to implement the useCustomForm hook, and it works just fine. But I am not sure, how i can propagate it to the Controller und useFormContext, because there the trim is not available.

[volpi-indagare]

Since this is only adding trim to the UseFormProps, you're not going to be able to propagate it to a controller/context since it's just an initialization prop that override things and will do the same thing for all onChange functions. So it's invisible to those other pieces of the framework, but it should still be trimming your values. Were you seeing that they were not trimmed?