How to update input config after registering

[maksbotan]

Hi!

I have a following use case — I want to enable/disable some inputs based on other inputs value or other events. I can successfully use setValue to set any input value inside useEffect, but if I try to register() input with already registered name and set {disabled:true}, nothing works.

How do I achieve this?

Sandbox: https://codesandbox.io/s/react-hook-form-re-register-update-6niq0f?file=/src/index.js

Code:

  const upd = useCallback(() => {
    register("lastName", {disabled: true});
    console.log("upd");
  }, [register]);

... 

  <button onClick={upd}>Disable</button></>

[bluebill1049]

shouldn't the disabled true value should be a toggleable state? then disabled prop will get updated?

[maksbotan]

Ah, I see, thanks. That indeed works, however, not very applicable to our use case.

We register inputs very far away from the code where I want to trigger disabled state, and it's not feasible to thread props through all the layers to get them to register calls.

Is there really no way to do it without modifying register call itself?

[maksbotan]

@bluebill1049 do you have any ideas about this?

[leapful]

@maksbotan : Function "register" from "useForm" hook only returns props to pass to HTML input element.

react-hook-form/src/logic/createFormControl.ts

Lines 921 to 948 in 2d5ee0e

	const register: UseFormRegister<TFieldValues> = (name, options = {}) => {
	let field = get(_fields, name);
	const disabledIsDefined = isBoolean(options.disabled);
	set(_fields, name, {
	...(field || {}),
	_f: {
	...(field && field._f ? field._f : { ref: { name } }),
	name,
	mount: true,
	...options,
	},
	});
	_names.mount.add(name);
	field
	? disabledIsDefined &&
	set(
	_formValues,
	name,
	options.disabled
	? undefined
	: get(_formValues, name, getFieldValue(field._f)),
	)
	: updateValidAndValue(name, true, options.value);
	return {
	...(disabledIsDefined ? { disabled: options.disabled } : {}),

If you don't put the "props" returned from "register" to HTML input element, there is nothing to be applied for disabled state.

[maksbotan]

Well, I thought it maintained some kind of internal state that contains validation rules and stuff for each input name?

So, you are saying that the only way to do this is to make react re-render input with different register arguments?

[leapful]

@maksbotan : It depends on what kind of disabled field state you want to manage.

For example, using local state which is a map or object value with field inputs and update disabled attribute on re-rendering.

const [fieldState, setFieldState] = useState({ 
  firstName: { disabled: false },
  lastName: { disabled: true }
});

// Use the state with react-hook-form

<input {...register('firstName')} disabled={fieldState.firstName.disabled} />

or via reference of native element

// Keep track on field refs, it can be stored in context or any state management to be re-use any from your code base
const refs = useRefs({});

const setDisabled = useCallback((name, value) => {
    if (refs[name]) {
        refs[name].disabled = value;
    }
}, []);

// Customize method "register" by enhancing it to keep track ref element on every field element that uses "register"
const { register: originRegister } = useForm();

const register = (fieldName, options) => {
   const methods = originRegister(fieldName, options);

   const customRef = (elementRef) => {
       methods.ref(elementRef);
       refs[fieldName] = elementRef;
    }

   return { ...methods, ref: customRef };
}

// Use new custom "register" method like normal

<input {...register('firstName')} />

// then disable it when the logic is changed

setDisabled('firstName', true);

Since "disabled" attribute is updated directly via native input element, it does not cause re-rendering on React component.