[$250] Android/iOS - Chat and the FAB menu options open on the chat page when tapping both in quick succession.

[kavimuru]

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. Launch App and login
2. From the LHN home screen, tap on any chat row and quickly tap on the green + icon (FAB)

Expected Result:

Only the chat should open as it was the first tap.

Actual Result:

Chat and FAB menu open at the same time

Workaround:

Unknown

Platform:

Where is this issue occurring?

• Android
• iOS

Version Number: v1.2.5-0 Reproducible in staging?: Y **Reproducible in production?:**Y Email or phone of affected tester (no customers): Logs: https://stackoverflow.com/c/expensify/questions/4856 Notes/Photos/Videos:

Android: https://user-images.githubusercontent.com/43996225/191874271-d3bcc36c-d4d0-4898-8a4c-61a254d43849.mp4

iOS:

Upwork URL: https://www.upwork.com/jobs/~019fb94172f17c76bc Issue reported by: Applause internal team Slack conversation:

View all open jobs on GitHub

[melvin-bot[bot]]

Triggered auto assignment to @Beamanator (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[Beamanator]

Looks like a good External issue, maybe we can prevent opening the FAB / prevent having it clickable if the route includes a report ID? Just an idea

[trjExpensify]

1. Launch App and login as HT account

What does HT stand for and will a contributor who gets this issue understand that abbreviation and be able to log-in to a "HT account"?

Only the FAB should be open as last tap or only Chat page should open

The expected results are ambiguous. It would need to be either of these things, and we should provide guidance on which one we want it to be. IMO, the last tap should be the action we take. So the chat page wouldn't open, only the global create menu would. @Beamanator, what are your thoughts there? I kinda' think this issue goes away as the app becomes more performant when navigating. As in, you won't have time to move your thumb and click the FAB.

Where is this issue occurring?

Android

Did we try reproducing on iOS? I can actually reproduce it there, so going to update the OP:

Looks like a good External issue, maybe we can prevent opening the FAB / prevent having it clickable if the route includes a report ID?

@Beamanator but on web/desktop it's expected that you can open the global create menu while currently on a chat report, will that proposal not cause problems on those platforms?

[Beamanator]

Sooo good point, HT is "High Traffic" which I think is a bit difficult to test as a contributor, but actually I'm even reproducing easily on Android w/ a non-HT account, so I'll remove that from the OP & title

IMO, the last tap should be the action we take. So the chat page wouldn't open, only the global create menu would. @Beamanator, what are your thoughts there?

Interesting, I was thinking the first action we take 🤔 Should we bring this to Slack for a wider discussion?

I kinda' think this issue goes away as the app becomes more performant when navigating. As in, you won't have time to move your thumb and click the FAB.

That's possible, but it would be pretty easy to tap a report & touch the FAB in VERY quick succession, so I still think it would be good to address this for now & later

And thanks for reproducing on iOS! It's fine to have proposals that will be for only 2 platforms, as long as we make sure there's no regressions on web / desktop :D

[jeet-dhandha]

Proposal

1. For this we can simply navigate user back to HOME screen if he accidentally presses on the FAB menu.

Also tested both scenarios:

1. Press on FAB and then press on a chat.
2. Press on chat and then press on FAB.

Code:

Fixed Video:

https://user-images.githubusercontent.com/78416198/192174264-62510594-a28d-4699-8cd8-29038fffa2c4.mov

[Beamanator]

Awaiting proposal review, not overdue

[trjExpensify]

Job on Upwork here: https://www.upwork.com/jobs/~019fb94172f17c76bc

[krishnemd]

I just found that the issue is replicating in few other places too.

• search box + LHN
• settings avatar + LHN

[trjExpensify]

I'm not sure I understand fully, @chauchausoup. Can you post us some screenshots/vids? 🤔

[trjExpensify]

In the meantime, @parasharrajat @Beamanator are we waiting on something for feedback on this current proposal? https://github.com/Expensify/App/issues/11229#issuecomment-1257333888

[parasharrajat]

Looking at it now and trying to understand the issue first :jack_o_lantern: .

[parasharrajat]

I do not get the expected result. What should be done to fix this? @trjExpensify

Only the FAB should be open as the last tap or only the Chat page should open

Both statements are contradicting each other. IMO, the first trigger action should take priority which is the chat opening action in our case. (try any native app and try to click two actions simultaneously, the one that is clicked first takes priority).

But the proposal https://github.com/Expensify/App/issues/11229#issuecomment-1257333888 is not matching any of them.

[trjExpensify]

Ah, yeah. The OP didn't get updated. Fixed! To confirm, yes, we're good with this approach:

the first trigger action should take priority which is the chat opening action in our case.

[jeet-dhandha]

I do not get the expected result. What should be done to fix this? @trjExpensify

Only the FAB should be open as the last tap or only the Chat page should open

Both statements are contradicting each other. IMO, the first trigger action should take priority which is the chat opening action in our case. (try any native app and try to click two actions simultaneously, the one that is clicked first takes priority).

But the proposal #11229 (comment) is not matching any of them.

@parasharrajat To give you simple explanation try calling two function one after each other and both should get executed.

// Like below. Both Action will execute and chate screen plus fab menu should get opened.
navigateToChat();
openFABMenu();

Example:

showCreateMenu() {
        this.setState({
            isCreateMenuActive: true,
        });
        // below code will open FAB Menu + Chat Screen.
        Navigation.navigate(ROUTES.REPORT_WITH_ID);
        this.props.onShowCreateMenu();
 }

Video:

https://user-images.githubusercontent.com/78416198/193238237-37a190b1-c09a-4d6e-acc1-112e57ab36b6.mov

[jeet-dhandha]

@parasharrajat If you are still not able to understand then please do ping here. 👍

[jeet-dhandha]

Update Proposal :

Used a More optimised Approch. CODE PR : https://github.com/jeet-dhandha/Expensify-App/pull/2/files.

Explanation:

Case 1 :

• Detail : Pressed on a report from list and within few milliseconds pressed on FAB menu. (Both are FAB menu and Report Message Screen is opened).
• Solution : I have set a value blockFABPress: true in state which updates to false after timeout of 300 by which the screen would have navigated succesfully. And the blockFABPress disables FAB press action.

Case 2 :

• Detail : Pressed on FAB menu and within few milliseconds pressed on a report from list. (Both are FAB menu and Report Message Screen is opened).
• Solution : I have passed a prop blockedReportPress in SidebarLinks and value is this.state.isCreateMenuActive, as isCreateMenuActive is true when FAB menu is opened up. So the blockedReportPress disables Report Press action.

Fixed Video:

https://user-images.githubusercontent.com/78416198/193250897-147f5f00-4e99-46fa-bd78-305edea28906.mov

[jeet-dhandha]

@trjExpensify Does my above proposal looks good ?

[parasharrajat]

I will review it by tomorrow.

[trjExpensify]

From a UI standpoint, the video looks good to me!

[trjExpensify]

@parasharrajat looking good here, or?

[parasharrajat]

Reviewing in 20 minutes

[parasharrajat]

@jeet-dhandha Are you able to perform Case 2 from your updated proposal? IMO, clicking on the FAB button should be spontaneous. Though it is shown with animation, all background interaction should be prevented by the backdrop.

These are our options.

1. Either the first action should take priority and it should be fast enough that the user is not able to perform the next action.
2. Or the Final action should cancel first?

First, I don't like the proposed approach. I didn't find it clean enough. I will wait to see different ideas.

I know I discussed this above but looking at your proposal, I am getting second thoughts. What if we handle it in a way so that the final action cancels the first one?

e.g.

• A

1. User clicks on navigation and then on the FAB.
2. Action in the FAB menu should cancel the Navigation and show the FAB.

• B

1. User clicked FAB, then on the chat row.
2. FAB becomes visible for an instant and immediately the chat screen is pushed.
3. FAb menu should be closed when the chat screen kicks in.

Just trying to think it though, what is best for the user?

cc: @Beamanator

[melvin-bot[bot]]

Looks like something related to react-navigation may have been mentioned in this issue discussion.

As a reminder, please make sure that all proposals are not workarounds and that any and all attempt to fix the issue holistically have been made before proceeding with a solution. Proposals to change our DeprecatedCustomActions.js files should not be accepted.

Feel free to drop a note in #expensify-open-source with any questions.

[Beamanator]

Hmm good points all around. Honestly I don't think this is a big problem for the user either way - if they click on a chat row & FAB at nearly the same time, they can't expect one to work and not the other, right? They obviously accidentally clicked one and will be ok fixing their click (assuming it doesn't go where they wanted)

In this case I call upon the @Expensify/design team for ideas!

[melvin-bot[bot]]

Triggered auto assignment to @michelle-thompson (Design), see these Stack Overflow questions for more details.

[trjExpensify]

In normal use with a speedy app, I think it will be incredibly unlikely that you can quickly tap both of these with the same thumb before the first action is registered.

Nevertheless, I've been testing using two thumbs to quickly tap multiple pieces of UI on a few native apps (i.e WhatsApp, Twitter etc) and they all ignore the final action. I think we're right to stick with this:

The first action should take priority

[michelle-thompson]

Yeah, I agree with the first action taking priority.