[PAY TALHA] [HOLD for payment 2023-09-27] [$1000] ANDROID CHROME - Split Bill: LHN does not close if clicking on the Workspaces link

[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. Go to https://help.expensify.com/articles/playbooks/Expensify-Chat-Playbook-for-Conferences on mobile device.
2. Open LHN and click on any step.
3. Notice the LHN closes and page scrolls down to relevant section.
4. Now go to https://help.expensify.com/hubs/split-bills.
5. Open LHN and click on Workspaces.
6. Notice the LHN does not close and nothing happens.

   Expected Result:

   In case of https://help.expensify.com/hubs/split-bill, clicking on links in the LHN which points to some section on the same page, the LHN should close and the screen should be scrolled down to relevant section.

   Actual Result:

   In case of https://help.expensify.com/hubs/split-bill, clicking on links in the LHN which points to some section on the same page, the LHN did not close.

Note: This seems to occur on the Workspaces link (the other 3 links seem fine).

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

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

• [ ] Android / native
• [x] Android / Chrome
• [ ] iOS / native
• [x] iOS / Safari
• [ ] MacOS / Chrome / Safari
• [ ] MacOS / Desktop

Version Number: 1.3.47-2 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: Any additional supporting documentation

https://github.com/Expensify/App/assets/43996225/887fc734-4577-4317-a9b3-2d1318d247c2

https://github.com/Expensify/App/assets/43996225/a6ccfad3-b76d-40d3-938a-8062b00f0263

Expensify/Expensify Issue URL: Issue reported by: @Talha345 Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1690460581911079

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01b88583567474c0d1
• Upwork Job ID: 1685897339918934016
• Last Price Increase: 2023-09-11
• Automatic offers:
• abdulrahuman5196 | Reviewer | 26631441
• Talha345 | Contributor | 26631442
• Talha345 | Reporter | 26631443

[getusha]

I was trying both your solutions. For some reason both doesn't work for me. (Ran both solutions separate)

@abdulrahuman5196 Can you try the second solution? it probably is not working because of the hash changed at first and you tried again. postate should work perfectly.

[Talha345]

Yes true. Seems I need to re-evaluate if my workaround mention is right. But anyways I will try if the solution is working then, will proceed accordingly.

Screen.Recording.2023-08-28.at.10.32.04.PM.mov

@abdulrahuman5196 my solution is working fine for me.

https://github.com/Expensify/App/assets/36226639/517e77f3-9513-4c81-8a76-31d5d9b3410a

IOS simulator:

https://github.com/Expensify/App/assets/36226639/4d985ce1-3949-41d4-874b-9bcd0fa43b64

Maybe you are doing something wrong

[getusha]

@getusha If you do not mind, I can provide some feedback on why your proposed solution is not very efficient and can also lead to further bugs. What you are suggesting is to add event listeners on hashchange or popstate event.If we do this and a user is on a page and goes to the URL and updates the fragment identifier manually, the LHN will open automatically if it is closed and vice versa.

We can add conditions if there will be any issues related and can you show me a video of the bug? i appreciate that.

[Talha345]

@getusha @Talha345

I was trying both your solutions. For some reason both doesn't work for me. (Ran both solutions separate)

And just ran following references here https://github.com/Expensify/App/tree/main/docs

But I am still seeing this issue in android simulator. Let me know if I am missing something.

If you look at the main.js file, we already have such listeners for other required functionality.

Yes true. Seems I need to re-evaluate if my workaround mention is right. But anyways I will try if the solution is working then, will proceed accordingly.

Screen.Recording.2023-08-28.at.10.32.04.PM.mov

@abdulrahuman5196 Just noticed the issue in your code.Remove line 220 and try again.

[Talha345]

window.addEventListener('hashchange', toggleHeaderMenu);

@getusha Please find below the video of the bug I mentioned in your proposed solution.

https://github.com/Expensify/App/assets/36226639/bb910051-6714-487c-9eb9-087502580130

[getusha]

@Talha345 that can be easily avoided by only closing the LHN instead of toggling it, which is the right thing to do.

[Talha345]

Hi @abdulrahuman5196, any update?

[getusha]

@abdulrahuman5196 i tested it again and it's working fine you can test this branch

https://github.com/Expensify/App/assets/75031127/173fb482-c36a-4bda-be34-7ef79f3fa13d

[abdulrahuman5196]

@Talha345 @getusha

On comment here https://github.com/Expensify/App/issues/23810#issuecomment-1696042503 i did try both solutions separately that time itself and didn't work.

Now I tested again, it seems to be working in chrome web on laptop by changing the responsiveness to mobile screen. But the same is not working directly in android simulator. (I have to test on real device, need to check on how to run in real devices)

And all the videos of working is uploaded on web responsive change or safari change, none is directly on android simulator or real android chrome(Which is the original bug platform)

Kindly test and let me know if it is working or if I had missed something.

[Talha345]

est and let me know if it is

@abdulrahuman5196 The bug is not platform specific.The bug occurs on help docs in responsive view on every platform.Maybe try ngrok to test on real device?

[abdulrahuman5196]

@Talha345

The bug is not platform specific.The bug occurs on help docs in responsive view on every platform.Maybe try ngrok to test on real device?

Did you try this and was the proposal working for you? If so could attach a video?

Tested on simulator and the proposal was not working

[Talha345]

@Talha345

The bug is not platform specific.The bug occurs on help docs in responsive view on every platform.Maybe try ngrok to test on real device?

Did you try this and was the proposal working for you? If so could attach a video?

Tested on simulator and the proposal was not working

@abdulrahuman5196 The bug was also reported by me.Also PFA the video on android after applying my proposal below.

https://github.com/Expensify/App/assets/36226639/faad41b5-a35e-4335-aa79-1fef2ad9c962

[abdulrahuman5196]

Got it. I will check on real devices then and update back here

[Talha345]

@abdulrahuman5196 You can test yourself using this ngrok link from my dev env https://60e1-85-8-80-53.ngrok-free.app/

[abdulrahuman5196]

@Talha345

@abdulrahuman5196 You can test yourself using this ngrok link from my dev env https://60e1-85-8-80-53.ngrok-free.app/

Sorry, I need to check myself if the solution is working or not before proceeding to next steps. I will check at my end and will update.

[Talha345]

@Talha345

@abdulrahuman5196 You can test yourself using this ngrok link from my dev env https://60e1-85-8-80-53.ngrok-free.app/

Sorry, I need to check myself if the solution is working or not before proceeding to next steps. I will check at my end and will update.

@abdulrahuman5196 Yes I understand that.I was just trying to help you to test on real device.

[Talha345]

Hi @abdulrahuman5196 , any update?

[jliexpensify]

Bumping @abdulrahuman5196 !

[melvin-bot[bot]]

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

[Talha345]

@jliexpensify Can you please ping @abdulrahuman5196 in slack as he has been MIA since a week?

[jliexpensify]

Pinged, thanks @Talha345 !

[abdulrahuman5196]

@Talha345 @getusha Both the solutions are not working even when trying with ngrok with real device. Maybe it could be related to devices. I tested with pixel 6 in real device and pixel 6 pro in simulator

It is only working in web chrome if I change the responsiveness to mobile device and test it out. Even in firefox web it is not working

[Talha345]

@Talha345 @getusha Both the solutions are not working even when trying with ngrok with real device. Maybe it could be related to devices. I tested with pixel 6 in real device and pixel 6 pro in simulator

@abdulrahuman5196 Firstly, the issue is only present in responsive mode.Secondly, I have tested my proposal on real Android as well as IOS devices as well as simulators and it was working flawlessly.I have already offered to provide you a ngrok link from my development environment which I would be happy to provide to you again.I have also shared the working video on a real device here.

Please let me know how can I can help you in this regard. Can you please share the screenshot of the code that you are applying while testing?

[abdulrahuman5196]

@Talha345 Can you provide your working ngrok? Let me see if that is working for me?

[Talha345]

@abdulrahuman5196 Sure! There you go.

https://b4e6-141-30-226-252.ngrok-free.app/#gsc.tab=0

[getusha]

@Talha345 @getusha Both the solutions are not working even when trying with ngrok with real device. Maybe it could be related to devices. I tested with pixel 6 in real device and pixel 6 pro in simulator

@abdulrahuman5196 i will test on real device and emulator and let you know.

[getusha]

@abdulrahuman5196 it's also working on both android and ios

Android:

https://github.com/Expensify/App/assets/75031127/7fc2f6a2-8456-465e-ab66-d6c4cf6ffdfa

IOS:

https://github.com/Expensify/App/assets/75031127/a692208b-227e-4df7-88b7-99bb68a52f68

make sure you are testing this branch from https://github.com/Expensify/App/issues/23810#issuecomment-1697397634

[abdulrahuman5196]

Thanks for the information folks. It seems to working fine for the contributors, for some reason not working for me. I will try for a little while to test it out at my end and come back with some findings or proposal approval.

[abdulrahuman5196]

Hi Folks, Sorry for the back and forth. But for some reason, still not working for me.

So I am sharing the code I am testing, let me know if I am missing something. Note: We don't usually do code diff checks, just a POC working would be fine, but since the proposals are not working at my end, sharing the code diff.

@Talha345 proposal I am testing.

--- a/docs/assets/js/main.js
+++ b/docs/assets/js/main.js
@@ -147,6 +147,13 @@ function insertElementAfter(referenceNode, newNode) {
     referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
 }

+function isSamePageScrollLink(link) {
+    const href = link.getAttribute("href");
+    if (href.startsWith("#") && !!document.getElementById(href.slice(1))) {
+        toggleHeaderMenu();
+    }
+}
+
 // Need to wait up until page is load, so the svg viewBox can be changed
 // And the search label can be inserted
 window.addEventListener('load', () => {
@@ -210,9 +217,9 @@ window.addEventListener('DOMContentLoaded', () => {
             // onclick function to apply to all links in toc. will be called with
             // the event as the first parameter, and this can be used to stop,
             // propagation, prevent default or perform action
-            onClick() {
-                toggleHeaderMenu();
-            },
+            // onClick() {
+            //     toggleHeaderMenu();
+            // },
         });
     }

@@ -234,6 +241,12 @@ window.addEventListener('DOMContentLoaded', () => {
             e.preventDefault();
         }
     });
+    lhnContent.addEventListener('click', (event) => {
+        const clickedLink = event.target;
+        if (clickedLink) {
+            isSamePageScrollLink(clickedLink);
+        }
+    });
     window.addEventListener('scroll', (e) => {
         const scrollingElement = e.target.scrollingElement;
         const scrollPercentageInArticleContent = clamp(scrollingElement.scrollTop - articleContent.offsetTop, 0, articleContent.scrollHeight) / articleContent.scrollHeight;

@getusha proposal I am testing took from here https://github.com/Expensify/App/issues/23810#issuecomment-1697397634

--- a/docs/assets/js/main.js
+++ b/docs/assets/js/main.js
@@ -1,10 +1,10 @@
 /* eslint-disable no-unused-vars */
-function toggleHeaderMenu() {
+function toggleHeaderMenu(close) {
     const lhn = document.getElementById('lhn');
     const lhnContent = document.getElementById('lhn-content');
     const anguleUpIcon = document.getElementById('angle-up-icon');
     const barsIcon = document.getElementById('bars-icon');
-    if (lhnContent.className === 'expanded') {
+    if (lhnContent.className === 'expanded' || close) {
         // Collapse the LHN in mobile
         lhn.className = '';
         lhnContent.className = '';
@@ -216,7 +216,8 @@ window.addEventListener('DOMContentLoaded', () => {
         });
     }

-    document.getElementById('header-button').addEventListener('click', toggleHeaderMenu);
+    window.addEventListener('popstate', () => toggleHeaderMenu(true))
+    document.getElementById('header-button').addEventListener('click', () => toggleHeaderMenu());

     // Back button doesn't exist on all the pages

[getusha]

@abdulrahuman5196 on which browser are you testing this on?

[Talha345]

Note: We don't usually do code diff checks, just a POC working would be fine, but since the proposals are not working at my end, sharing the code diff.

@abdulrahuman5196 The code for my proposal seems fine on your end, however I think there might be some problem in your docs setup!

[abdulrahuman5196]

@abdulrahuman5196 on which browser are you testing this on?

@getusha Chrome web, firefox web, pixel 6 pro simulator, pixel 6 real device.

Only working on chrome web. None of the other is working.

[Talha345]

Chrome web, firefox web, pixel 6 pro simulator, pixel 6 real device.

Only working on chrome web. None of the other is working.

@abdulrahuman5196 What command are you using to run the jekyll server?

[abdulrahuman5196]

Note: We don't usually do code diff checks, just a POC working would be fine, but since the proposals are not working at my end, sharing the code diff.

@abdulrahuman5196 The code for my proposal seems fine on your end, however I think there might be some problem in your docs setup!

@Talha345 Not sure on how this bug fix alone is related to docs setup.

Command I used to run bundle exec jekyll serve --livereload got from here https://github.com/Expensify/App/tree/main/docs#testing-locally

Anyways i will setup an another fresh repo clone and test this out. Even if not working will reach out to other members for help to avoid dragging on this issue.

[Talha345]

Note: We don't usually do code diff checks, just a POC working would be fine, but since the proposals are not working at my end, sharing the code diff.

@abdulrahuman5196 The code for my proposal seems fine on your end, however I think there might be some problem in your docs setup!

@Talha345 Not sure on how this bug fix alone is related to docs setup.

Command I used to run bundle exec jekyll serve --livereload got from here https://github.com/Expensify/App/tree/main/docs#testing-locally

Anyways i will setup an another fresh repo clone and test this out. Even if not working will reach out to other members for help to avoid dragging on this issue.

@abdulrahuman5196 can you simply try to run the server without the livereload flag i.e bundle exec jekyll serve

[getusha]

Chrome web, firefox web, pixel 6 pro simulator, pixel 6 real device.

Hmmm just tested on firefox and it seems to be working,

[abdulrahuman5196]

@abdulrahuman5196 can you simply try to run the server without the livereload flag i.e bundle exec jekyll serve

Yep tried before. Same results.

Hmmm just tested on firefox and it seems to be working,

Seems its working for all except me 😮‍💨 .

Will try to setup fresh clone and if still not working will reach out to other members for help.

[Talha345]

Seems its working for all except me 😮‍💨 .

Will try to setup fresh clone and if still not working will reach out to other members for help.

@abdulrahuman5196 Sounds good! Will be waiting for an update! Do let me know if you need any further assistance in any way 🙂

[abdulrahuman5196]

Seems its working for all except me 😮‍💨 . Will try to setup fresh clone and if still not working will reach out to other members for help.

@abdulrahuman5196 Sounds good! Will be waiting for an update! Do let me know if you need any further assistance in any way 🙂

Thank you will provide an update by tomorrow.

[getusha]

Seems its working for all except me 😮‍💨 . Will try to setup fresh clone and if still not working will reach out to other members for help.

thanks, let me know if you need me to build it and send you the link.

[abdulrahuman5196]

Seems its working for all except me 😮‍💨 . Will try to setup fresh clone and if still not working will reach out to other members for help.

thanks, let me know if you need me to build it and send you the link.

Thank you @getusha . Will reach out if anything else is required.

[Talha345]

Seems its working for all except me 😮‍💨 . Will try to setup fresh clone and if still not working will reach out to other members for help.

@abdulrahuman5196 Sounds good! Will be waiting for an update! Do let me know if you need any further assistance in any way 🙂

Thank you will provide an update by tomorrow.

Hi @abdulrahuman5196 , any update ?

[jliexpensify]

Not overdue, waiting on @abdulrahuman5196

[tsa321]

@abdulrahuman5196 what is the expected result? Should the page scroll to workspace or Paying Friends section? The https://help.expensify.com/articles/playbooks/Expensify-Chat-Playbook-for-Conferences is different format page compared to https://help.expensify.com/hubs/split-bills. Is it supposed to scroll a little to workspace and paying friend section?
and Isn't is a little weird because the workspace section is inside split bills section? Shouldn't it placed at the same level as split bills?

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[abdulrahuman5196]

Sorry folks, last week got some blocker issues. Setting up new workspace now. Will update in couple of hours.

[abdulrahuman5196]

I setup a new workspace and both the solutions are working fine in the setup. @getusha 's solution here https://github.com/Expensify/App/issues/23810#issuecomment-1680676503 is on the same concept but with a different approach(different listener) comparing to @Talha345 's proposed solution here https://github.com/Expensify/App/issues/23810#issuecomment-1656068129. Previously pointed out the same here https://github.com/Expensify/App/issues/23810#issuecomment-1695974617

So I am going ahead with the first proposal of @Talha345 .

@Talha345 's proposal here https://github.com/Expensify/App/issues/23810#issuecomment-1656068129 looks good and works well.

🎀 👀 🎀 C+ Reviewed

[melvin-bot[bot]]

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