Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Checking ToS box before filling fields throws error in mweb but not in android app #26699

Merged
merged 2 commits into from
Sep 8, 2023
Merged

Checking ToS box before filling fields throws error in mweb but not in android app #26699

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a80707c
Add focus logic into form to validate the focused input if the change…
tamdao Sep 4, 2023
0508ec8
Update FORMS.md doc to add onFocus
tamdao Sep 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions contributingGuides/FORMS.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -274,6 +274,7 @@ Form.js will automatically provide the following props to any input with the inp
- onBlur: An onBlur handler that calls validate.
- onTouched: An onTouched handler that marks the input as touched.
- onInputChange: An onChange handler that saves draft values and calls validate for that input (inputA). Passing an inputID as a second param allows inputA to manipulate the input value of the provided inputID (inputB).
- onFocus: An onFocus handler that marks the input as focused.

## Dynamic Form Inputs

Expand Down
12 changes: 12 additions & 0 deletions src/components/Form.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,7 @@ function Form(props) {
const formContentRef = useRef(null);
const inputRefs = useRef({});
const touchedInputs = useRef({});
const focusedInput = useRef(null);
const isFirstRender = useRef(true);

const {validate, onSubmit, children} = props;
Expand Down Expand Up @@ -305,6 +306,12 @@ function Form(props) {
// as this is already happening by the value prop.
defaultValue: undefined,
errorText: errors[inputID] || fieldErrorMessage,
onFocus: (event) => {
focusedInput.current = inputID;
if (_.isFunction(child.props.onFocus)) {
child.props.onFocus(event);
}
},
onBlur: (event) => {
// Only run validation when user proactively blurs the input.
if (Visibility.isVisible() && Visibility.hasFocus()) {
Expand All @@ -328,6 +335,11 @@ function Form(props) {
},
onInputChange: (value, key) => {
const inputKey = key || inputID;

if (focusedInput.current && focusedInput.current !== inputKey) {
setTouchedInput(focusedInput.current);
}

setInputValues((prevState) => {
const newState = {
...prevState,
Expand Down
Loading