Track last valid input state and auto-reset on blur

[snoozbuster]

Hey there. I have a requirement as described in the title - I want to automatically reset an input to the last valid value when the field is blurred, if the field is currently invalid. I figured I could do this with a plugin, and this is what I cooked up:

function resetInvalidPlugin(node: FormKitNode) {
  if (node.props.type === 'group') {
    return;
  }

  let lastValue;
  let nextValue;
  let isValid;

  node.on('input', ({ payload }) => {
    // track unvalidated next value
    nextValue = payload;
  });
  node.on('unsettled:blocking', () => {
    // keep track of the fact that the field is invalid
    isValid = false;
  });
  node.on('settled:blocking', () => {
    // once the field becomes valid, note so and set the last noted input valid as the last valid value
    isValid = true;
    lastValue = nextValue;
  });
  node.on('created', () => {
    lastValue = node._value;
    const blur = node.context!.handlers.blur;
    node.context!.handlers.blur = () => {
      blur();
      if (!isValid) {
       // on blur, if the field is invalid, reset to the last valid value
        node.input(lastValue);
      }
    };
  });
}

This... almost works. But sometimes if the user types very quickly, an invalid value gets stored in the lastValue before the validation kicks in. indeed, from my logs, it seems like the blocking counter settles even while there are validation errors:

The third line here is incorrect - there is a validation rule of ['matches', '/.+\n+.+/'] on this field (it is only valid if there are at least 2 lines). it does eventually notice on lines 4 right afterward that the field is invalid, but by that time it is too late - the invalid value has already made it into the lastValue variable and now the resetting won't work.

Is there a better way to achieve this? I tried also using settled:errors as in this example but that event never seemed to be fired for me.

[fenilli]

the reason for the settled:errors not firing is because those are for errors and not validation errors, so errors created by the backend and added manually using setErrors.

As for your plugin reseting a value back to before it was invalid: https://formkit.link/edfa6f1951870b3f585346eefca6cd5d

[snoozbuster]

ah, perfect! thank you!