I want to enable the below button name completeSubmissionButton only when value of variable isSaving changed from "inProgress" to "Saved". I'm not sure how to do it? As per below condition, focus of the button is enabled when form status is in progress and form is valid but I want to enable only when form is valid and form status changes from inprogress to saved and focus should be enable once. Problem, I have is when form is editable (meaning in progress), it always moves the focus to complete button and I'm not able to edit the current text button
console.log("isSaving", isSaving); //values are isProgress or Saved or idle
console.log("isFormValid", isFormValid); // true or false
useEffect(() => {
if( completeSubmissionButton?.current && isSaving === SAVING_STATUS.IN_PROGRESS && isFormValid){
completeSubmissionButton.current.focus();
}
});
Right now, your condition checks if isSaving === SAVING_STATUS.IN_PROGRESS.
You want to check instead for if isSaving === SAVING_STATUS.SAVED and another condition to let you know if it just changed from in progress to saved.
You can have another variable to notate what the previous status was. So you can check for isSaving === SAVING_STATUS.SAVED && isSavingPrev === SAVING_STATUS.IN_PROGRESS.
Alternatively, you could create a condition just for the focus() thing such as
if(wheneverYourIsSavingGoesFromProgressToSaved) {
isSaving = SAVING_STATUS.SAVED;
focusButton = true;
}
...
useEffect(() => {
if(completeSubmissionButton?.current && focusButton && isFormValid){
completeSubmissionButton.current.focus();
focusButton = false;
}
})