You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The text was updated successfully, but these errors were encountered:
JNieuwhuis
changed the title
Incorrect 'error' state in the form in the Login component
Bug: Incorrect 'error' state in the form in the Login component
Jan 6, 2023
If the error state doesn't resolve to true even when a form error is present, then there may be a problem with how the state is being updated in the Login component.
Here are some possible reasons why the error state may not be updating correctly:
The error state is not being updated in response to the form error: Make sure that the error state is being set to true when a form error occurs. Check that the code that updates the error state is being called and that it's setting the state correctly.
The formError prop is not being passed correctly: Check that the formError prop is being passed to the Login component correctly. If it's not being passed at all, or if it's being passed with the wrong value, then the error state won't update correctly.
The shouldDisplayError function is not working correctly: The shouldDisplayError function determines whether or not the error message should be displayed. If it's not working correctly, then the error message won't be displayed even when the error state is set to true. Check that the shouldDisplayError function is correctly checking the error state and returning the correct value.
The Input component is not being rendered correctly: Make sure that the Input component is being rendered with the correct props. If it's not being rendered with the error prop set to true, then the error message won't be displayed.
Once you've identified the issue, you should be able to fix the problem and get the correct visual display of the input field when a form error occurs.
In the case of a formError in the Login component these classes should be added according to your code:
https://github.com/vtex/styleguide/blob/master/react/components/Input/index.js#L138-L139
However, the state of 'error' doesn't resolve to true, even if a formError is present. This results in an incorrect visual display of the input field:
The text was updated successfully, but these errors were encountered: