[HOLD for payment 2023-05-04] ON HOLD [$1000] Suggestion text below company address is not visible when we don't select any suggested option but it is visible in every other cases

[kavimuru]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Open the app
2. Open Workspaces
3. Open any workspace
4. Open connect bank account
5. Click on connect manually
6. Fill in step 1 information (eg data: routing number = 210021002, acc no = 1234)
7. In company address, type in address but don't select any option and after typing, select city below
8. Observe that suggestion text below company address is gone
9. Fill in other details, click on continue and click on back and obserce that suggestion text below company address is back
10. Click on back few times and click on startover, again fill in step 6 details and observe that company address has suggestion text below it
11. Type in address and select any one suggestion and observe that company address has suggestion text below it

Expected Result:

App should display suggestion text below company address if user decides to fill it on their own and not use the suggested addresses

Actual Result:

App does not display suggestion text below company address if user decides to fill it on their own and if suggestions were still displayed before user tries to move to fill in other details

Workaround:

unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.2.88-0
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos:

suggested.text.not.displayed.issue.mp4

Recording.27.mp4

Expensify/Expensify Issue URL:
Issue reported by: @dhanashree-sawant
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1679566976110789

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~018ed613b675853bc5
• Upwork Job ID: 1641411262190702592
• Last Price Increase: 2023-03-30

[MelvinBot]

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

[MelvinBot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[zanyrenney]

I'm not sure if this constitutes a bug, so need to check on this and bring a conversation to bug0.

[zanyrenney]

I guess looking at this again, it is inconsistent so makes sense to progress forward here.

[MelvinBot]

Job added to Upwork: https://www.upwork.com/jobs/~018ed613b675853bc5

[MelvinBot]

Current assignee @zanyrenney is eligible for the External assigner, not assigning anyone new.

[MelvinBot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @eVoloshchak (External)

[MelvinBot]

Triggered auto assignment to @iwiznia (External), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[Prince-Mendiratta]

Proposal

Please re-state the problem that we are trying to solve in this issue.

In the AddressSearch component, when we there is a hint present on the input and we enter an address but do not select any recommendation, then when we focus away from the input, the hint is not shown.

What is the root cause of that problem?

We render the hint conditionally to hide it when the suggestions are being shown:

App/src/components/AddressSearch.js

Line 231 in b3f6dda

hint: displayListViewBorder ? undefined : props.hint,

However, when we do not select an address and focus away, the displayListViewBorder state does not change, thus making the hint not show up.

What changes do you think we should make in order to solve the problem?

We need to modify the onBlur prop passed to GooglePlacesAutocomplete such that it executes any existing onBlur prop passed to it and sets the displayListViewBorder to false.

It is necessary to execute the props.onBlur because in most components, the AddressSearch component is a part of the Form.js. In Form.js, there exists an onBlur prop such that when the focus is changed, a validation function is executed. So to fix this issue, we need to execute that function in conjugation with executing the passed onBlur prop.

This can be achieved by creating an inline function which is passed to the onBlur prop in GooglePlacesAutocomplete. This function will first check if props.onBlur is a function and if it is, it executes with props.onBlur(). Then, it executes setDisplayListViewBorder(false); to set the correct state, allowing for the hint to show back up.

Result

2023-03-30.17-56-29.mp4

[zanyrenney]

Thanks for your proposal @Prince-Mendiratta

[Pujan92]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Suggestion text not toggles and shows once we move focus to the other elements without selecting/pressing any suggested option

What is the root cause of that problem?

Currently, onPress of the option from the GooglePlacesAutocomplete we are setting the displayListViewBorder to false which shows the hint text. But on blur of the textInput of GooglePlacesAutocomplete textInputProps we are not setting displayListViewBorder to false which causes this issue.

What changes do you think we should make in order to solve the problem?

We need to update the onBlur inside textInputProps of the GooglePlacesAutocomplete with
onBlur: () => setDisplayListViewBorder(false),

App/src/components/AddressSearch.js

Lines 213 to 236 in b091e3c

	textInputProps={{
	InputComp: TextInput,
	ref: (node) => {
	if (!props.innerRef) {
	return;
	}
	if (_.isFunction(props.innerRef)) {
	props.innerRef(node);
	return;
	}
	// eslint-disable-next-line no-param-reassign
	props.innerRef.current = node;
	},
	label: props.label,
	containerStyles: props.containerStyles,
	errorText: props.errorText,
	hint: displayListViewBorder ? undefined : props.hint,
	value: props.value,
	defaultValue: props.defaultValue,
	inputID: props.inputID,
	shouldSaveDraft: props.shouldSaveDraft,
	onBlur: props.onBlur,

We are not passing onBlur from the parent for any occurrences so we can take out props.onBlur.

[tienifr]

Proposal

Please re-state the problem that we are trying to solve in this issue.

App does not display hint text under the company address is the user click outside of the dropdown without selecting an option.

What is the root cause of that problem?

In this line

App/src/components/AddressSearch.js

Line 236 in 4ee21e9

hint: displayListViewBorder ? undefined : props.hint,

, the hint is only displayed if the displayListViewBorder is false.

The displayListViewBorder is set to false if the user selects an option, but is not if the user blurs out of the GooglePlacesAutocomplete.

What changes do you think we should make in order to solve the problem?

We need to set the displayListViewBorder to false when the user blurs the address search input and the option list.

This can be done by updating this line

App/src/components/AddressSearch.js

Line 241 in 4ee21e9

onBlur: props.onBlur,

to

onBlur: (event) => {
    if (!(containerRef.current && event.target && containerRef.current.contains(event.relatedTarget))) {
        setDisplayListViewBorder(false);
    }
    props.onBlur(event);
}

The containerRef is the ref of the address search container (could be this one) that we can set via useRef.

The related target check is required here because without it, when we select an option, the onBlur will still trigger, setting displayListViewBorder to false will make the auto complete component re-render before onPress is called, making selecting an option not working.

Currently there's a bug in our react-native-google-places-autocomplete fork here https://github.com/Expensify/react-native-google-places-autocomplete/blob/e12768f1542e7982d90f6449798f0d6b7f18f192/GooglePlacesAutocomplete.js#L860 that is not passing the event to onBlur, we need to fix that as well. The main react-native-google-places-autocomplete lib already fixed is so we can just update our fork to the latest

What alternative solutions did you explore? (Optional)

• We can wrap the setDisplayListViewBorder(false); inside InteractionManager.runAfterInteractions as well instead of using related target check
• The relatedTarget check can be added upstream in the library instead of in our code

Result

Working well after the fix:

Screen.Recording.2023-04-01.at.15.45.52.mov

[MelvinBot]

@iwiznia, @eVoloshchak, @zanyrenney Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[iwiznia]

@eVoloshchak can you review the proposals above please?

[zanyrenney]

asking for help in bug0 https://expensify.slack.com/archives/C01SKUP7QR0/p1683637396695429

[eVoloshchak]

• The PR that introduced the bug has been identified. Link to the PR: Enable Form inputs to manipulate related field values #9207

• The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: Enable Form inputs to manipulate related field values #9207 (comment)

• A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion: I don't think additional discussion is needed, this is a visual bug, there is nothing we can do besides automated UI tests

• Determine if we should create a regression test for this bug.
  Is it easy to test for this bug? Yes
  Is the bug related to an important user flow? (For example, adding a bank account) Yes
  Is it an impactful bug? No

  The bug has a very low impact, but it's easy to test and is related to connect bank account flow. I think we might want to add a simple regression test

[eVoloshchak]

Regression Test Proposal

1. Open Workspaces > select any workspace > connect bank account
2. Click on connect manually
3. Fill in step 1 information (eg data: routing number = 210021002, acc no = 1234)
4. In the company address, type in address but don't select any option, wait for the list with addresses to load
5. Click outside the list (ex: click on the city field)
6. Verify that the suggestion text below the company address is displayed

Do we agree 👍 or 👎

[zanyrenney]

At Accountex so won't get to this regression test + payout for a few days, reassiging.

[melvin-bot]

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

[conorpendergrast]

Cool I'll get to this today!

[conorpendergrast]

@iwiznia Can you give me a sense-check and a 👍 or 👎 on the bonus here? I've ignored the assignment date, and instead I'm working based on the date that this was taken off hold. Dates are here

[conorpendergrast]

Offers sent at base rate, will add bonus and pay pending discussion here

[melvin-bot]

Current assignee @conorpendergrast is eligible for the Bug assigner, not assigning anyone new.

[melvin-bot]

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

[conorpendergrast]

@sophiepintoraetz Sorry to bring you in on this too Sophie! I am OoO until Monday and in the interest of these payments being overdue, I wanted to make sure they didn't have to wait until then.

Once you and @iwiznia have agreed if the bonuses are due, then the contracts here can be paid. I've already paid the issue reporter!

[iwiznia]

Yep, agree on bonuses

[conorpendergrast]

Ionatan is speedy, so I'm doing the payments. Wrap-up steps are yours, Sophie!

[conorpendergrast]

Payments done

[sophiepintoraetz]

QA steps requested here.