Split bill - Deselected attendees shifting to above the another user

[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://staging.new.expensify.com and login
2. Select a group chat
3. Click split bill
4. Proceed to final confirmation page
5. Deselect the last attendee in the list and one above the last

Expected Result:

Deselected are expected to stay in the same position

Actual Result:

When an attendee is deselected below attendee is moving up 1 position in the list

Workaround:

Unknown

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.1.11-0
Reproducible in staging?: yes
Reproducible in production?: yes
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos:

Bug5303283_Recording__159.mp4

Expensify/Expensify Issue URL:
Issue reported by:
Slack conversation:

View all open jobs on GitHub

[MelvinBot]

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

[PrashantMangukiya]

Proposed Solution: (If considered as external)

Deselected are expected to stay in the same position

Within IOUConfirmationList.js when list rendered, we are rendering section list with WHO PAID?, WHO WAS THERE?, and Unselected participants. i.e. Unselected participants are also rendered as separate list (but without section header). So it is not feasible/good idea to keep unselected attendees on same position because in that case it will show mix list of selected and unselected participants. Also to achieve this we need to change rendering logic so I will not suggest to go that way.

So I am proposing middle solution. i.e. when attendee deselected it shows within unselected list, but deselected attendee will not goes to bottom of the list, instead of that unselected attendee will maintain its position either begin, middle, or bottom within unselected list, it will also looks natural and expected behaviour to human eye.

Here is Problem:

When attendee deselected via toggleOption(), we are removing that from list (line 389-391), thereafter toggle selected, and push to bottom of list (line 393-396), So deselected attendees always goes to bottom of list.

App/src/components/IOUConfirmationList.js

Lines 388 to 398 in 973dcf4

	this.setState((prevState) => {
	const newParticipants = _.reject(prevState.participants, participant => (
	participant.login === option.login
	));
	newParticipants.push({
	...option,
	selected: !option.selected,
	});
	return {participants: newParticipants};
	});

Here is Proposed Solution:

Within App/src/components/IOUConfirmationList.js file, we have to update this.setState({ ... }) code as under, so it will toggle unselected attendee state and keep it on same position in array.

  this.setState((prevState) => {
      const newParticipants = _.map(prevState.participants, (participant) => {
          if (participant.login === option.login) {
              return {...option, selected: !option.selected};
          }
          return participant;
      });
      return {participants: newParticipants};
  });

After updates it will behave as shown under:

Web.mov

[MelvinBot]

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

[tgolen]

I think the proposal above is a good proposal (for when we are ready to hire for this job). 🟢

[mvtglobally]

Issue reproducible during KI retests.

[puneetlath]

@PrashantMangukiya created the job here and invited you to it.