[HOLD for payment 2024-11-20] [$250] Inconsistency in displaying Search icon when returning to expenses opened from Search

[lanitochka17]

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

---

Version Number: 9.0.54-1
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Action Performed:

Precondition: Logged in to New Expensify on two devices with different accounts

1. [User B] Submit expense to user A
2. [User A] Tap on Search icon in the bottom
3. [User A] Tap on expense created in step 1
4. [User A] Tap on From link in the header
5. [User A] Tap on back arrow

Expected Result:

Search icon should be displayed consistently

Actual Result:

Search icon is not displayed in step 3., but it appears in step 5
Also, sometimes the icon appears when refreshing the page after step 3

Workaround:

Unknown

Platforms:

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

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6645536_1729859825149.2024-10-25_14-14-58.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021850913269706139520
• Upwork Job ID: 1850913269706139520
• Last Price Increase: 2024-11-04
• Automatic offers:
• nyomanjyotisa | Contributor | 104771832

Issue Owner

Current Issue Owner: @isabelastisser

[melvin-bot]

Triggered auto assignment to @isabelastisser (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.

[shahinyan11]

Edited by proposal-police: This proposal was edited at 2024-10-25 15:57:01 UTC.

Proposal

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

Inconsistency in displaying Search icon when returning to expenses opened from Search

What is the root cause of that problem?

Here we have a check to hide search icon if the report opened in RHP. But this check does not work correct. When clicking on the "From" link, a new screen does not open in RHP and the previous screen continues to update, causing the isReportInRHP become false.

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

First, we should clarify whether the displaying or hiding is expected, since the current implementation reminds us that we want to always hide the search icon in a report opened in RHP.

A) If the displaying is expected behavior then we can delete this check and always pass shouldDisplaySearchRouter true here.

B) But if the displaying is not expected behavior then we should also add one more check ( if screen is focused ) to this.

const isFocused = useIsFocused();
... 
isFocused && !isReportInRHP;

What alternative solutions did you explore? (Optional)

[shahinyan11]

Proposal

Updated. Made changes to make the thought expressed clearer and more understandable

[ChavdaSachin]

Proposal

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

Inconsistency in displaying Search icon when returning to expenses opened from Search

What is the root cause of that problem?

• We hide search button intentionally in case report is open in RHP here.
  

  App/src/components/MoneyReportHeader.tsx

  Line 180 in b7c1cfa

  const shouldDisplaySearchRouter = !isReportInRHP;

• So when report is first open from search router - it opens in RHP, and later navigating from link - it opens as general report screen which causes inconsistency.

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

• IMO expected behavior here should be - hide search button if report is open from RHP in web, and show search button even fro RHP on mobile devices. Coz for mobile devices RHP itself opens in main screen.
• Add isMobile() check here.
  

  App/src/components/MoneyReportHeader.tsx

  Line 180 in b7c1cfa

  const shouldDisplaySearchRouter = !isReportInRHP;

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[FitseTLT]

Proposal

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

Inconsistency in displaying Search icon when returning to expenses opened from Search

What is the root cause of that problem?

To display the search button we ensure that the report is not opened in RHP

App/src/components/MoneyRequestHeader.tsx

Line 68 in a86ee35

const isReportInRHP = isReportOpenInRHP(navigationRef?.getRootState());

The isReportOpenInRHP determines whether the report is open in RHP using the current navigation root state but the problem is isReportInRHP is updated every time there is a re-render so the value is determined on the navigation state at which the rerender happened so if current focused screen is not open in RHP when the re-calculation happened it will update the isReportInRHP false and when we navigate back to the report opened in RHP the value will not be updated and will hold the prev wrong value so it will show the search button for the report that was opened in search RHP, hence, the inconsistency.

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

We should calculate the isReportInRHP value once when the navigation is ready so we should:

const [isReportInRHP, setIsReportInRHP] = useState(true);
    useEffect(() => {
        Navigation.isNavigationReady().then(() => {
            setIsReportInRHP(isReportOpenInRHP(navigationRef?.getRootState()));
        });
    }, []);

We should do the same here and here

What alternative solutions did you explore? (Optional)

[nyomanjyotisa]

Edited by proposal-police: This proposal was edited at 2024-10-29 09:30:38 UTC.

Proposal

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

Inconsistency in displaying Search icon when returning to expenses opened from Search

What is the root cause of that problem?

We always don't show the search icon if we open in RHP

App/src/components/MoneyReportHeader.tsx

Line 180 in 9825fa2

const shouldDisplaySearchRouter = !isReportInRHP;

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

Change it to: only show the search icon if we not open in RHP or isSmallScreenWidth is true

const shouldDisplaySearchRouter = !isReportInRHP || isSmallScreenWidth;

App/src/components/MoneyReportHeader.tsx

Line 180 in 9825fa2

const shouldDisplaySearchRouter = !isReportInRHP;

App/src/components/MoneyRequestHeader.tsx

Line 69 in 9825fa2

const shouldDisplaySearchRouter = !isReportInRHP;

App/src/pages/home/HeaderView.tsx

Line 145 in 9825fa2

const shouldDisplaySearchRouter = !isReportInRHP;

What alternative solutions did you explore? (Optional)

Return false if isSmallScreenWidth is true on isReportOpenInRHP

[isabelastisser]

@muttmuure, how can I add this issue to [#whatsnext] #quality?

[melvin-bot]

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