[$250] iOS - Distance expense-Unable to submit distance expense offline, Next button is unresponsive or works with delay

[IuliiaHerets]

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

---

Version Number: v9.0.64-1
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Y
Issue reported by: Applause Internal Team

Action Performed:

1. Open New Expensify staging app and sign in.
2. Tap FAB - Submit expense.
3. Choose Distance option.
4. Disable internet connection.
5. Type in distance points and tap Next button.

Expected Result:

User is able to create Distance expense offline.

Actual Result:

User is not able to create Distance expense offline, Next button becomes unresponsive.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6660407_1731199992108.Next_button_ND.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021859634020737443781
• Upwork Job ID: 1859634020737443781
• Last Price Increase: 2024-12-19

[melvin-bot]

Triggered auto assignment to @sakluger (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[melvin-bot]

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

[melvin-bot]

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

[sakluger]

No proposals yet.

[Condo97]

Hello, I've been working on this and I have a proposal for a fix. The fix is in regard to rendering issues with OfflineIndicator. I have already found the fix and would like to get hired and submit the pull request. What are the next steps?

Proposal:
Fix rendering issues with OfflineIndicator. Due to the nature of offline handling and React rendering, it may cause the renderer to position part of OfflineIndicator over the button in a view update. If the view refreshes, like if the user swipes left on the screen slightly, the view updates again and OfflineIndicator's invisible head is rendered correctly and the button can be pressed.
The fix is in regard to getting the view correct the first time. Instead of having the view render incorrectly and then wait for an update, the fix makes sure the view is rendered correctly the first time and no invisible head is covering the button.
It's a very simple fix but it's taken me over 12 hours to figure out! Works in tests and across devices!

[melvin-bot]

📣 @Condo97! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[Condo97]

Contributor details
Your Expensify account email: [email protected]
Upwork Profile Link: https://www.upwork.com/freelancers/~01237b4ed5e35e0560?mp_source=share

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[Condo97]

Hello, I've been working on this and I have a proposal for a fix. The fix is in regard to rendering issues with OfflineIndicator. I have already found the fix and would like to get hired and submit the pull request. What are the next steps?

Proposal:
Fix rendering issues with OfflineIndicator. Due to the nature of offline handling and React rendering, it may cause the renderer to position part of OfflineIndicator over the button in a view update. If the view refreshes, like if the user swipes left on the screen slightly, the view updates again and OfflineIndicator's invisible head is rendered correctly and the button can be pressed.
The fix is in regard to getting the view correct the first time. Instead of having the view render incorrectly and then wait for an update, the fix makes sure the view is rendered correctly the first time and no invisible head is covering the button.
It's a very simple fix but it's taken me over 12 hours to figure out! Works in tests and across devices!

[melvin-bot]

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

[sakluger]

Hi @Condo97, thank you for looking into this issue! Could you please follow the proposal template when posting your proposal? If you'd like more guidance on how to make a good proposal, you can review the Contributing Guide again or look at past closed jobs in the repo to see which proposals have been selected.

[Condo97]

Proposal

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

In the Distance option, when user switches to offline state and navigates to and from the Start or Stop views, the Next button becomes unresponsive.

What is the root cause of that problem?

Button is incorrectly rendered with an invisible overlay from OfflineIndicator. This can be especially seen because the button is surprisingly not entirely disabled, but only disabled when tapped on the bottom half or ⅔. And when the user triggers another view refresh to the button (i.e. by swiping left slightly to expose the Scan option) it works correctly.

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

With the state change of isOffline, its primitive value needs to be read rather than the value of the object itself.

[abdulrahuman5196]

@Condo97 , Kindly add code pointers in the repo, where you think the issue is happening and how do you intend to solve it.

[Condo97]

@abdulrahuman5196 The issue is happening in src/components/OfflineIndicator.tsx line 37. I intend to solve it by getting the primitive value instead of its object value to ensure the view is rendered correctly.

I'm not sure what you mean by adding pointers in the repo. I was told not to make a pull request until the proposal has been accepted. Should I go ahead and make one, or do you mean something else? Thank you.

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot]

@sakluger, @abdulrahuman5196 Huh... This is 4 days overdue. Who can take care of this?

[sakluger]

@Condo97 here is an example of a correctly formatted proposal from a previous Github issue that uses code pointers: #52023 (comment)

[abdulrahuman5196]

Checking now

[abdulrahuman5196]

@Condo97 I don't think that the RCA and solution is correct. isOffline is a boolean value not an object

App/src/hooks/useNetwork.ts

Line 9 in a9bf599

type UseNetwork = {isOffline: boolean};

[abdulrahuman5196]

No proposal to approve yet

[sakluger]

Waiting for new proposals.

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[sakluger]

Still no new proposals.

[melvin-bot]

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

[abdulrahuman5196]

No proposals

[melvin-bot]

@sakluger @abdulrahuman5196 this issue is now 4 weeks old, please consider:

• Finding a contributor to fix the bug
• Closing the issue if BZ has been unable to add the issue to a VIP or Wave project
• If you have any questions, don't hesitate to start a discussion in #expensify-open-source

Thanks!

[linhvovan29546]

I couldn't reproduce this issue on the main branch. Can anyone confirm if it still exists?

[sakluger]

I asked for a retest in Slack: https://expensify.slack.com/archives/C9YU7BX5M/p1734619813748899

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[mvtglobally]

Fixed

ScreenRecording_12-19-2024.19-08-47_1.MP4

ScreenRecording_12-19-2024.19-07-30_1.MP4

[mvtglobally]

Issue not reproducible during KI retests. (First week)

[melvin-bot]

@sakluger, @abdulrahuman5196 Whoops! This issue is 2 days overdue. Let's get this updated quick!

[abdulrahuman5196]

Issue not reproducible during KI retests. (First week)

[sakluger]

Alright, I'll close for now! We can reopen if it becomes reproducible again.