Console error when clicking 'Fix Errors' for State select input

[Gonals]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Action Performed:

1. Go to URL https://staging.new.expensify.com/
2. Login with Expensifail account
3. Go to Settings => Payments => Add a debit card
4. Fill all data up until the State
5. Without entering any data, click "Save"
6. Click on 'fix the errors' button

Expected Result:

No errors should show in the console

Actual Result:

An error shows up in the console:

Workaround:

Not needed

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.2.31-2
Reproducible in staging?: Yes
Reproducible in production?: Yes
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation
Expensify/Expensify Issue URL:
Issue reported by:
Slack conversation:

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @miljakljajic (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[Gonals]

Similar-ish to this one, but different underlying issue and reproducible in Staging/Prod

[miljakljajic]

I was able to reproduce this:

Could this be worked on by an external contributor?

[mdneyazahmad]

Proposal

ref is not passed properly in https://github.com/Expensify/react-native-picker-select/blob/7f09b2c15ffae320d769788f75bdf8948714bb10/src/index.js#L8

Form stores a reference of all input elements in inputRefs. When the fix the errors button is pressed it execute the focus method on the reference element.

App/src/components/Form.js

Lines 262 to 266 in dd37575

	onFixTheErrorsLinkPressed={() => {
	const errors = !_.isEmpty(this.state.errors) ? this.state.errors : this.props.formState.errorFields;
	const focusKey = _.find(_.keys(this.inputRefs), key => _.keys(errors).includes(key));
	this.inputRefs[focusKey].focus();
	}}

The reference element here does not reference the select element, and there does not exist focus method. Therefore the issue appears in console.

App/src/components/Picker/index.js

Lines 177 to 182 in dd37575

	ref={(el) => {
	if (!_.isFunction(this.props.innerRef)) {
	return;
	}
	this.props.innerRef(el);
	}}

Solution

Forward ref in RNPickerSelect component.

https://github.com/Expensify/react-native-picker-select/blob/7f09b2c15ffae320d769788f75bdf8948714bb10/src/index.js

+export default React.forwardRef((props, ref) => {
+    return <RNPickerSelect innerRef={ref} {...props} />;
+});

https://github.com/Expensify/react-native-picker-select/blob/7f09b2c15ffae320d769788f75bdf8948714bb10/src/index.js#L541

+                   ref={this.props.innerRef}

[Gonals]

Ah, @miljakljajic, @mdneyazahmad , I linked the fix PR yesterday, so this doesn't need to be worked on

[mdneyazahmad]

@Gonals I missed that linked PR, sorry for that. I believe after the PR clicking on the button, it will do nothing. If you go ahead with my proposal, It will focus the internal select element, and pressing Space will open the select options, and pressing Enter will submit the form. Thanks!

[Gonals]

RNPickerSelect is an external component, though, and since this PR will take us to the right element anyways, I think it is fine to just avoid the console error here.

[melvin-bot]

@Gonals, @miljakljajic Still overdue 6 days?! Let's take care of this!

[melvin-bot]

@Gonals, @miljakljajic 10 days overdue. Is anyone even seeing these? Hello?

[melvin-bot]

@Gonals, @miljakljajic 12 days overdue now... This issue's end is nigh!

[melvin-bot]

This issue has not been updated in over 14 days. @Gonals, @miljakljajic eroding to Weekly issue.

[melvin-bot]

This issue has not been updated in over 15 days. @Gonals, @miljakljajic eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[miljakljajic]

Do we need to keep this open? Is there anything left to be done?

[alex-mechler]

FYI, this PR hid the problem with #15290, as we no longer were attempting to call focus on a component that did not have that method, instead of fixing the fact that there was no focus