Split bill preview in app shows only 3 candidates, causing confusion when more than 3 are selected

[kbecciv]

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. Click the plus sign at the bottom of the screen.
2. Select "Split Bill" and add desired number.
3. Choose more than 5 people to split with and click "Next". Observe that the app only includes 3 of them in the preview and does not indicate that others have been left out, causing confusion.

Expected Result:

App should display all selected individuals in preview or indicate that some have not been included with three dots.

Actual Result:

App displays only three candidates in preview when more than 5 or so are selected, causing confusion by not indicating that some have been left out.

Workaround:

Unknown

Platforms:

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

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

Version Number: 1.3.29.3

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

screen-capture (91) (1).webm

https://github.com/Expensify/App/assets/93399543/aeaed34e-24af-4949-8dbc-cd29a7296ea4

Expensify/Expensify Issue URL:

Issue reported by: @tewodrosGirmaA

Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1686648290378409

View all open jobs on GitHub

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[bernhardoj]

The list is scrollable

[jeet-dhandha]

Proposal

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

• Currently, there is no way to identify if there is a scroll available on the screen.

What is the root cause of that problem?

• There is no indicator to show if there is a scroll available on the screen.

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

• We can show a indicator arrow at bottom. Like i have done here. This might help at many places to identify scrolls.

• We can hide the indicator arrow when the scroll is at the bottom.

• I have basically handled this using onScroll, onLayout and onContentSizeChange.

• And created two states, isScrollable and isLastItemVisible.

• isScrollable is used to show/hide the indicator arrow.

• isLastItemVisible is used to hide the indicator arrow when the scroll is at the bottom.

https://github.com/Expensify/App/assets/78416198/12d24542-4af5-4dbd-8661-039b0f029641

What alternative solutions did you explore? (Optional)

N/A

[spcheema]

@jeet-dhandha I like your idea let's put up improvement in the slack group

[spcheema]

Unless someone accepts to fix in this issue.

[sakluger]

I agree that when the window size cuts off the list exactly between two people, that it's not clear that it's a scrollable list.

It looks fine in this example:

But in this example, when I change the window size just slightly, it's not great:

@Expensify/design I'd love your thoughts on how best to fix this. Do we have an existing pattern for scrollable lists that does a better job indicating when there is more below the fold?

[shawnborton]

Hm good question. I don't think we do, so part of me thinks we could just close this?

We could consider some kind of fade out or something, but I don't feel strongly. Maybe bring this to the open source room for more discussion, or bump the thread?

[jeet-dhandha]

@shawnborton @spcheema - Please ping here whenever you get an update.

[sakluger]

Thanks @shawnborton, I'll bring up for discussion in open-source and post here with the decision. I think you're probably right that we should close for now, since it's not necessarily a bug, just a design pattern that could be improved.

[sakluger]

Actually, we do have a similar design pattern - the LHN. There's no indicator that there are more chats below the fold. Given that we're following the existing design pattern, I'm just going to close this for now.

[jeet-dhandha]

@sakluger @shawnborton - Please do assign me this task if you think to implement something in future.