Add the withFormikExtended HOC, which extends the behaviour of the default withFormik HOC. This enhancement allows a Formik form to be reset once its initial value is loaded, enabling it to render even before the initial value is ready. Without this functionality, the form might not be able to submit if its isInitialValid check requires the initial value to be present.
Why?
This is necessary because some checkout extensions are located inside Formik forms. To render these extensions before their parent forms are fully loaded, we need a way to reinitialise the forms once the required data is ready, as explained above.
Testing / Proof
Before
This video shows that the shopper cannot submit the form because it is rendered before the initial value is loaded. Consequently, the isInitialValid check marks the form as invalid and prevents submission.
This video shows that the shopper can submit the form because it is reinitialised after the initial value is loaded. As a result, the isInitialValid function has the necessary data to perform its check, allowing the form to be submitted if it is valid.
What?
Add the
withFormikExtendedHOC, which extends the behaviour of the defaultwithFormikHOC. This enhancement allows a Formik form to be reset once its initial value is loaded, enabling it to render even before the initial value is ready. Without this functionality, the form might not be able to submit if itsisInitialValidcheck requires the initial value to be present.Why?
This is necessary because some checkout extensions are located inside Formik forms. To render these extensions before their parent forms are fully loaded, we need a way to reinitialise the forms once the required data is ready, as explained above.
Testing / Proof
Before
This video shows that the shopper cannot submit the form because it is rendered before the initial value is loaded. Consequently, the
isInitialValidcheck marks the form as invalid and prevents submission.https://github.com/user-attachments/assets/09187d1e-5de2-417d-b83d-af470dbfc980
After
This video shows that the shopper can submit the form because it is reinitialised after the initial value is loaded. As a result, the
isInitialValidfunction has the necessary data to perform its check, allowing the form to be submitted if it is valid.https://github.com/user-attachments/assets/7558bc2f-64d8-45c7-b195-3c77f357657e
@bigcommerce/team-checkout