[react-form] Changing field value onBlur results in validation getting stale value

[joshbuckley182]

Overview

We are trying to clean up an input value onBlur. The correct value is reflected in the form field, but validation sees the version immediately prior to the change.

For example, we would expect to be able to do something like this:

<TextField
  ...
  onBlur={() => {
    const cleanedValue = cleanValue(field.value);
    if (cleanedValue !== field.value) {
      field.onChange(cleanedValue);
    }

    field.onBlur()
  }}
/>

However, while this does cause the field to (visually) update, the value passed to the validation rules is the non-cleaned value.

We have managed to work around this by setting a triggerBlurOnNextFieldChange state, and using useEffect to trigger a blur when the field changes and triggerBlurOnNextFieldChange is true. Our workaround can be seen here: https://github.com/Shopify/linkpop/pull/3289/commits/4c7a554abfc698b9a97140728c99e79e1c376616

Consuming repo

What repo were you working in when this issue occurred?
https://github.com/Shopify/linkpop

Checklist

• Please delete the labels section before submitting your issue
• I have described this issue in a way that is actionable (if possible)