[$250] iOS Split - Submit button appears then disappears when keyboard is open

[IuliiaHerets]

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.64-4
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Y
Email or phone of affected tester (no customers): applausetester+29302390@applause.expensifail.com
Issue reported by: Applause Internal Team

Action Performed:

1. Launch ND or hybrid app.
2. Open chat.
3. Tap + > Split expense > Manual.
4. Enter amount > Next.
5. Tap on the split input.

Expected Result:

Submit button will not appear and disappear when keyboard is open.

Actual Result:

Submit button appears then disappears when keyboard is open.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6670779_1732114874878.ScreenRecording_11-20-2024_22-57-28_1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021860016281597788500
• Upwork Job ID: 1860016281597788500
• Last Price Increase: 2024-11-22

Issue Owner

Current Issue Owner: @mollfpr

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

[QichenZhu]

Edited by proposal-police: This proposal was edited at 2024-11-22 04:05:07 UTC.

Proposal

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

The submit button appears and disappears when the keyboard opens on the money request confirmation page.

What is the root cause of that problem?

The submit button is hidden on purpose after the keyboard opens to resolve #50663.

App/src/components/MoneyRequestConfirmationList.tsx

Lines 827 to 829 in 686b8b4

	const footerContent = useMemo(() => {
	if (isReadOnly || isKeyboardShown || isWindowHeightReducedByKeyboard) {
	return;

The problem is that the keyboard opens with an animation, but the button is hidden only after the keyboard is fully open.

App/src/components/withKeyboardState.tsx

Line 29 in 686b8b4

const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', (e) => {

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

Replace keyboardDidShow with keyboardWillShow in the code mentioned above. Since this change affects many places in the app, we need to test it carefully.

const keyboardWillShowListener = Keyboard.addListener('keyboardWillShow', (e) => { 

return () => {
    keyboardWillShowListener.remove();

What alternative solutions did you explore? (Optional)

Introduce a new state that listens to keyboardWillShow and use it specifically in the money request confirmation page. This approach might be safer than the main solution.

[melvin-bot]

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

[melvin-bot]

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