[HOLD for payment 2024-12-19] [$250] Can't click Pay buttons when the edit composer is focused

[m-natarajan]

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.66-7
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?:
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: @DylanDylann
Slack conversation (hyperlinked to channel name): ts_external_expensify_bugs

Action Performed:

1. Go to any chat that waiting for you to pay
2. Focus on main composer
3. Click to dropdown button or pay button
4. See that the action happen
5. Click edit any message to display edit composer
6. Click to dropdown button or pay button

Expected Result:

Click buttons should work normally

Actual Result:

Can't click buttons when the edit composer is focused

Workaround:

Unknown

Platforms:

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

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

Screenshots/Videos

Add any screenshot/video evidence

Screen.Recording.2024-11-26.at.10.25.56.mov

Edit.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021862984432318114296
• Upwork Job ID: 1862984432318114296
• Last Price Increase: 2024-11-30
• Automatic offers:
• DylanDylann | Reviewer | 105207759

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @DylanDylann

[melvin-bot]

Triggered auto assignment to @adelekennedy (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.

[m-natarajan]

@DylanDylann discovered this bug while reviewing #51172

[DylanDylann]

I have more context with focus input while working on #51172. Could I take over this issue as C+ if it is external

[bernhardoj]

Proposal

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

Pressing the pay button does nothing when the edit composer is focused and a keyboard is shown.

What is the root cause of that problem?

The root cause is the same as this old issue. When we press the pay button, the edit composer is blurred which triggers the main composer visibility, moving the view up, so the press event isn't caught by the button.

App/src/pages/home/report/ReportActionItemMessageEdit.tsx

Lines 546 to 553 in c4ff235

	onBlur={(event: NativeSyntheticEvent<TextInputFocusEventData>) => {
	setIsFocused(false);
	const relatedTargetId = event.nativeEvent?.relatedTarget?.id;
	if (relatedTargetId === CONST.COMPOSER.NATIVE_ID || relatedTargetId === CONST.EMOJI_PICKER_BUTTON_NATIVE_ID || EmojiPickerAction.isEmojiPickerVisible()) {
	return;
	}
	setShouldShowComposeInputKeyboardAware(true);
	}}

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

We have a few options.

First, we can follow the same approach as #12715, that is by adding

onMouseDown={e => e.preventDefault()}

for the button. However, we need to apply this to all buttons/pressable in the chat list, including the reply text, etc.

The other solution is to delay showing the main composer.

App/src/libs/setShouldShowComposeInputKeyboardAware/index.android.ts

Line 3 in c4ff235

export default setShouldShowComposeInputKeyboardAwareBuilder('keyboardDidHide');

setShouldShowComposeInputKeyboardAware for android & iOS, only shows the main composer after the keyboard hide, but web doesn't have the same thing. So, we can apply a 0 timeout for web only.

App/src/libs/setShouldShowComposeInputKeyboardAware/index.ts

Lines 4 to 6 in c4ff235

	const setShouldShowComposeInputKeyboardAware: SetShouldShowComposeInputKeyboardAware = (shouldShow) => {
	Composer.setShouldShowComposeInput(shouldShow);
	};

const setShouldShowComposeInputKeyboardAware: SetShouldShowComposeInputKeyboardAware = (shouldShow) => {
    setTimeout(() => {
        Composer.setShouldShowComposeInput(shouldShow);
    }, 0);
};

or we can delay it using interaction manager and requestAnimationFrame.

App/src/pages/home/report/ReportActionItemMessageEdit.tsx

Lines 529 to 533 in c4ff235

	InteractionManager.runAfterInteractions(() => {
	requestAnimationFrame(() => {
	reportScrollManager.scrollToIndex(index, true);
	});
	});

[melvin-bot]

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