Coming from the New Expensify Forms design doc, we should refactor the inputs within the IdentityForm to be compatible with the new Form component, following the guidelines below:
Here's an example of a Form refactor: #9056
Here is a component that had its inputs refactored to be compatible with Form.js.
Guidelines
Contributors should first read FORMS.md.
The refactored inputs should be functional when wrapped by Form.js and when not.
- Add an optional inputID prop.
- Add an optional shouldSaveDraft prop that defaults to false.
- Make the value prop optional.
- Change any onChange prop, e.g. onTextChange to onChange.
- In the input’s onBlur method, call props.onBlur().
- In the input’s onChange method, call props.onChange() .
- Remove the hasError prop.
- Update the error message to display if errorText is truthy.
- Make sure that props.ref is attached to the appropriate DOM node. This could involve forwarding the ref to a child component.
- Make sure the ref is exposing both value and focus().
- Add an optional maxLength prop to text inputs and UI to display the current character count out of the limit.
- Add a hint prop and display the text under the input if there is no existing error.
- Remove any unused code.
Testing
Verify that:
Coming from the New Expensify Forms design doc, we should refactor the inputs within the IdentityForm to be compatible with the new Form component, following the guidelines below:
Here's an example of a Form refactor: #9056
Here is a component that had its inputs refactored to be compatible with Form.js.
Guidelines
Contributors should first read FORMS.md.
The refactored inputs should be functional when wrapped by Form.js and when not.
Testing
Verify that:
fix the errorslink focuses the first input with error