Chat - The keyboard disappears and appears again when the expanded composer is scrolled

[izarutskaya]

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.10-2
Reproducible in staging?: Y
Reproducible in production?: Y
Found when validating PR : #45664
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

1. Open the app
2. Log in with any account
3. Navigate to FAB - Start chat
4. Open a conversation with any account
5. Insert more text into the composer than can be displayed
6. Expand the composer
7. Swipe down a few times inside the composer until you reach the top
8. Swipe up a few times inside the composer until you reach the bottom

Expected Result:

The keyboard shouldn't disappear.

Actual Result:

The keyboard disappears and appears again when the expanded composer is scrolled. Also repro when the composer isn't expended but it takes more effort to make it happen.

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

Bug6548307_1721501250963.az_recorder_20240720_203524.mp4

View all open jobs on GitHub

[melvin-bot]

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

[izarutskaya]

We think this issue might be related to the #vip-vsb

[bernhardoj]

Proposal

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

The keyboard disappears when scrolling down the composer.

What is the root cause of that problem?

The composer is wrapped with a SwipableView which will close the keyboard if we swipe down further than the threshold.

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

Lines 199 to 200 in 637796d

	<SwipeableView onSwipeDown={Keyboard.dismiss}>
	<ReportActionCompose

App/src/components/SwipeableView/index.native.tsx

Lines 7 to 21 in 637796d

	const minimumPixelDistance = CONST.COMPOSER_MAX_HEIGHT;
	const oldYRef = useRef(0);
	const panResponder = useRef(
	PanResponder.create({
	// The PanResponder gets focus only when the y-axis movement is over minimumPixelDistance & swipe direction is downwards
	onMoveShouldSetPanResponderCapture: (_event, gestureState) => {
	if (gestureState.dy - oldYRef.current > 0 && gestureState.dy > minimumPixelDistance) {
	return true;
	}
	oldYRef.current = gestureState.dy;
	return false;
	},
	// Calls the callback when the swipe down is released; after the completion of the gesture
	onPanResponderRelease: onSwipeDown,

The current swipe-down distance threshold is 125.

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

Increase the threshold to a bigger value when the composer is expanded (isComposerFullSize) or set it based on the container height and subtract by any number needed.

App/src/components/SwipeableView/index.native.tsx

Line 27 in 637796d

<View {...panResponder.panHandlers}>{children}</View>

const containerHeightRef = useRef(0);
...
onLayout={e => containerHeightRef.current = e.nativeEvent.layout.height}

[melvin-bot]

@anmurali Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

@anmurali 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[muttmuure]

edge case - not worth fixing