two inputs depending on each other

[Mouerr]

Hello i have a form that has image input, width input, height input, when i upload an image i get it's dimensions then i setValue of width && height, also i have a button called ratio lock, when enabled width must change if i change height and height must change when i change width to avoid losing image ratio.
The problem is that i have a custom input built with useController and am using useEffect in the place where am calling my customInput and my code goes infinite loop.

My custom numericInput.js

import React from "react";
import {useController, useFormContext} from "react-hook-form";
import "./NumericInput.css"

function NumericInput({name, ...props}) {
    const [btnPlusDisabled, setBtnPlusDisabled] = React.useState(false);
    const [btnMinusDisabled, setBtnMinusDisabled] = React.useState(false);
    const {control, setValue} = useFormContext();
    const {
        field: {onChange, onBlur, value, ref},
    } = useController({
        name,
        control,
        rules: {required: true, valueAsNumber: true}
    });

    const handlePlus = React.useCallback(() => {
        let result;
        if ((Number(value) + props.step) <= props.max) {
            result = Number(value) + props.step;
            if (!Number.isInteger(result)) {
                result = Number(result.toFixed(1));
            }
        } else {
            result = props.max;
            setBtnPlusDisabled(true);
            setBtnMinusDisabled(false);
        }
        onChange(result);
        setValue(name, result, {shouldDirty: true, shouldTouch: true, shouldValidate: true});
        handleButtonsUI(result);
    }, [setValue, name, value]);

    const handleMinus = React.useCallback(() => {
        let result;
        if ((Number(value) - props.step) >= props.min) {
            result = Number(value) - props.step;
            if (!Number.isInteger(result)) {
                result = Number(result.toFixed(1));
            }
        } else {
            result = props.min;
            setBtnMinusDisabled(true);
            setBtnPlusDisabled(false);
        }
        onChange(result);
        setValue(name, result, {shouldDirty: true, shouldTouch: true, shouldValidate: true});
        handleButtonsUI(result);
    }, [setValue, name, value]);

    const handleChange = (evt) => {
        const changeValue = evt.target.value;
        let result;
        if (!isNaN(parseFloat(changeValue))) {
            if (changeValue <= props.min) {
                result = props.min;
            } else if (changeValue >= props.max) {
                result = props.max;
            } else {
                result = Number(changeValue);
            }
        } else {
            result = Number(value)
        }
        console.log("changed")
        onChange(result);// data send back to hook form
        setValue(name, result, {shouldDirty: true, shouldTouch: true});// UI state
        handleButtonsUI(result);
    }

    const handleButtonsUI = (number) => {
        if (number <= props.min) {
            setBtnMinusDisabled(true);
            setBtnPlusDisabled(false);
        } else if (number >= props.max) {
            setBtnPlusDisabled(true);
            setBtnMinusDisabled(false);
        } else {
            setBtnPlusDisabled(false);
            setBtnMinusDisabled(false);
        }
    }

    return <div className="numeric-input">
        <div className={`calculator-btn ${btnMinusDisabled ? 'disabled' : ''}`} onClick={debounce(handleMinus, 200)}>-</div>
        <input type="number" step='any'
               name={name} onChange={handleChange} ref={ref} value={value} onBlur={onBlur}/>
        <div className={`calculator-btn ${btnPlusDisabled ? 'disabled' : ''}`} onClick={debounce(handlePlus, 200)}>+</div>
    </div>
}

export default React.memo(NumericInput);

My app.js

import React, {useEffect, useState} from "react";
import NumericInput from "@components/elements/NumericInput";
import {IconButton} from "@components/elements/IconButton";
import {useFormContext, useWatch} from "react-hook-form";
import getImageDimensions from "@helpers/getImageDimensions";

const NumericInputsRatio = ({inputPrefix, MarkerMaxHeight, MarkerMaxWidth}) => {
    const {getFieldState, getValues, setValue} = useFormContext();
    const [ratioLock, setRatioLock] = useState(true);
    const markerWidth = useWatch({name: `${inputPrefix}.width`});
    const markerHeight = useWatch({name: `${inputPrefix}.height`});
    const markerLogo = useWatch({name: `${inputPrefix}.src`});
    const markerLogoState = getFieldState(`${inputPrefix}.src`);
    const markerWidthState = getFieldState(`${inputPrefix}.width`);
    const markerHeightState = getFieldState(`${inputPrefix}.height`);

    const currentMarkerValues = getValues(inputPrefix);

    useEffect(async () => {
        if (markerLogoState.isTouched) {
            const dimensions = await getImageDimensions(markerLogo);

            setValue(inputPrefix, {...currentMarkerValues, dimensions.width, dimensions.height}, {shouldDirty: false, shouldTouch: false});
        }
    }, [markerLogo, markerLogoState.isTouched]);

// this is changing height depends on new width value
    useEffect(async () => {
        if (ratioLock && markerWidthState.isTouched && !isNaN(parseFloat(markerWidth))) {
            const logoDimensions = await getImageDimensions(markerLogo);
            const imgRatio = logoDimensions.width / logoDimensions.height;

            if (!isNaN(imgRatio)) {
                const heightNewValue = markerWidth / imgRatio;
                setValue(`${inputPrefix}.height`, Math.round(heightNewValue * 100) / 100, {shouldDirty: false, shouldTouch: false});
            }
        }
    }, [ratioLock, markerWidth, markerWidthState.isTouched]);

// this is changing width depends on new height value
    useEffect(async () => {
        if (ratioLock && markerHeightState.isTouched && !isNaN(parseFloat(markerHeight))) {
            const logoDimensions = await getImageDimensions(markerLogo);
            const imgRatio = logoDimensions.width / logoDimensions.height;

            if (!isNaN(imgRatio)) {
                const widthNewValue = markerHeight * imgRatio;
                setValue(`${inputPrefix}.width`, Math.round(widthNewValue * 100) / 100, {shouldDirty: false, shouldTouch: false});
            }
        }
    }, [ratioLock, markerHeight, markerHeightState.isTouched]);

    return <div style={{display: 'grid', gridTemplateColumns: '1.5fr 3fr 1fr', alignItems: 'center'}}>
        <div>Width</div>
        <NumericInput min={1} max={MarkerMaxWidth} step={1} name={`${inputPrefix}.width`}/>

        <div style={{flex: 1, alignSelf: 'center'}}>Height</div>
        <NumericInput min={1} max={MarkerMaxHeight} step={1} name={`${inputPrefix}.height`}/>
        <IconButton name={ratioLock ? 'lock' : 'unlock'} onClick={() => setRatioLock(!ratioLock)} iconProps={{size: '2x'}}
                    style={{gridColumn: 3, gridRow: '1 / span 2'}}/>
    </div>
}


export default React.memo(NumericInputsRatio);

After searching in RHF community i found an example about inputs depending https://codesandbox.io/s/late-cdn-44cfzm

my case using the same way and it's work without the need of useEffect and without infinite loop https://codesandbox.io/s/affectionate-cdn-6s5rlh

So my question is how i can i do the same thing in my numericInput.js Component.

Here is how my original form looks like :

[bluebill1049]

I haven't got a chance to read through all the above, maybe trigger is what you are after?

[Mouerr]

Hi @bluebill1049 thanks for your fast answer, i tried adding trigger in my useEffect but nothing changed, i still falling in infinite loop, could you please explain how to use it correctly.

[Moshyfawn]

Hey, @Mouerr!
Can you, please, condense the desired behavior of your provided codesandbox in a few simple steps to better understand what you're looking for?

[Mouerr]

Hi @Moshyfawn the provided codesandbox is working good but it's not my original code, i did it just to simulate my case depending on https://codesandbox.io/s/late-cdn-44cfzm i found in a discussion, in my case am using useEffect & useWatch to change value of inputs, and my code goes in an infinite loop(i provided the code in the discussion above).

The simple solution that i see now is to avoid using useEffect & useWatch and do the same way like in the provided codesandbox but this solution will force me to double the code of numericInput.js 2 times so i can handle the onChange of my 2 depending inputs.

[Mouerr]

The behavior is:

• when changing height, the width must changed if button is enabled.
• when changing width, the height must changed if button is enabled.
• when changing any input and button is disabled, don't change other input.