How can we control the validation behavior of pluggable widgets ?
0
I have two pluggable "input" widgets in my projects - a custom date picker and a custom reference selector. Both are placed inside same data view and have client side validation. I'm using EditableValue validation attribute to show the validation message on client side. The issue is any kind of action triggered on that page also triggers the validation of input widgets and after the validation is triggered any other activity is suspended and is unable to execute. Is there any way to avoid re-render of pluggable widgets on execution of any other action on the page. Any hints are appreciated. // use effect hook in both the widgets. // I have two states hasError and validationMessage which are used to display validation on client side. useEffect(() => { if (inputValue.validation) { setHasError(true); setValidationMessage(inputValue.validation); } else { setHasError(false); setValidationMessage(""); } }, [inputValue.validation]); // Validator used for validation for both input widgets useEffect(() => { const validator = val => { // console.info("Value in validator: ", val); if (required && requiredMessage.value && !val) { return requiredMessage.value; } else if ((inputValue.validation || inputValue.validation !== "") && !val) { return inputValue.validation; } else { return undefined; } }; inputValue.setValidator(validator); // Set Validator }, [])