[$500] Tag - "Show more" button does not expand the list when clicked on

[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!

---

Version Number: 1.4.27-1
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
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal team
Slack conversation:

Action Performed:

Precondition: User is an employee of a Collect workspace that has 700 tags.

1. Navigate to workspace chat as employee.
2. Open manual request page.
3. Enter amount > Next > Show more.
4. Click Tag.
5. Scroll down to the bottom.
6. Click Show more.

Expected Result:

The list will expand.

Actual Result:

Nothing happens when clicking on Show more. This issue also happens in contact selection list when the list is long enough.

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6346915_1705605433972.20240119_012658.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~014922c638cdf27d55
• Upwork Job ID: 1748068834384871424
• Last Price Increase: 2024-01-18
• Automatic offers:
• Ollyws | Reviewer | 28117886
• abzokhattab | Contributor | 28117888

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[kbecciv]

@greg-schroeder - #wave6-collect-submitters

[gijoe0295]

Proposal

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

"Show more" button does not trigger on press.

What is the root cause of that problem?

SectionList's ListFooterComponent receives a component while renderFooterContent is a function.

App/src/components/OptionsList/BaseOptionsList.js

Line 293 in 31b19ea

ListFooterComponent={renderFooterContent}

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

We need to manually call renderFooterContent() before passing to ListFooterComponent here.

ListFooterComponent={renderFooterContent()}

What alternative solutions did you explore? (Optional)

NA

Result

Screen.Recording.2024-01-19.at.03.39.56-compressed.mov

[abzokhattab]

Proposal

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

"Show more" button does not trigger on press.

What is the root cause of that problem?

we wrongly pass the footer content as a function, not components values here:

That is why the OptionsList parses it as a function not react components:

App/src/components/OptionsSelector/BaseOptionsSelector.js

Lines 579 to 590 in 0ea199f

	renderFooterContent={() =>
	shouldShowShowMoreButton && (
	<ShowMoreButton
	containerStyle={{...this.props.themeStyles.mt2, ...this.props.themeStyles.mb5}}
	currentCount={CONST.MAX_OPTIONS_SELECTOR_PAGE_LENGTH * this.state.paginationPage}
	totalCount={this.state.allOptions.length}
	onPress={this.incrementPage}
	/>
	)
	}
	/>
	);

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

we need to change it to:

       renderFooterContent={
                    shouldShowShowMoreButton && (
                        <ShowMoreButton
                            containerStyle={{...this.props.themeStyles.mt2, ...this.props.themeStyles.mb5}}
                            currentCount={CONST.MAX_OPTIONS_SELECTOR_PAGE_LENGTH * this.state.paginationPage}
                            totalCount={this.state.allOptions.length}
                            onPress={this.incrementPage}
                        />
                    )
                }

[Pujan92]

SectionList's ListFooterComponent receives a component while renderFooterContent is a function.

Not sure then how #31447 was working.

[bernhardoj]

This is a regression from #32464. They add a focusin and out listener which will update disableEnterShortCut state. Every time we press down the button, the focusin is triggered and causes the show more button to remount and mount again because we pass it as an inline component, so the click is never registered.

[Ollyws]

@abzokhattab's proposal LGTM.
🎀👀🎀 C+ reviewed

[puneetlath]

Sounds good to me.

[melvin-bot]

📣 @Ollyws 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

📣 @abzokhattab 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[melvin-bot]

This issue has not been updated in over 15 days. @puneetlath, @Ollyws, @abzokhattab eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[puneetlath]

Whoops, looks like the automation failed on this one and @abzokhattab and @Ollyws need to be paid.

[puneetlath]

@abzokhattab was paid.

@Ollyws you need to accept the offer: https://www.upwork.com/nx/wm/offer/28117886

[Ollyws]

Accepted, thanks!

[puneetlath]

All paid. Thanks y'all!