Basically the FormValidationElement component enables validation on the second re-render rather than when the user modifies the value.
If FormValidationElement is used in isolation it works fine because the parent component will re-render when the user interacts with this element and validation will become enabled as expected.
If FormValidationElement is used with other elements, it does not work correctly because if any other element is interacted with and causes the parent component to re-render, FormValidationElement's validation will become enabled even though the user hasn't interacted with that element in the form yet.
I think the solution is to compare the previous value with the newly provided value and see if it has changed. If it has changed, then enable validation.
FormValidationElement doesn't behave correctly if it's used in a parent component with other elements. The reason is due to this line I think: https://github.com/influxdata/clockface/blob/master/src/Components/Form/FormValidationElement.tsx#L71
Basically the FormValidationElement component enables validation on the second re-render rather than when the user modifies the value.
If FormValidationElement is used in isolation it works fine because the parent component will re-render when the user interacts with this element and validation will become enabled as expected.
If FormValidationElement is used with other elements, it does not work correctly because if any other element is interacted with and causes the parent component to re-render, FormValidationElement's validation will become enabled even though the user hasn't interacted with that element in the form yet.
I think the solution is to compare the previous
valuewith the newly providedvalueand see if it has changed. If it has changed, then enable validation.https://user-images.githubusercontent.com/6411855/157988764-53094cdd-c09e-4e63-add7-d9e922ca9e4d.mov