[Due for payment 2026-01-07] [$250] Workspace - Keypad appears briefly on tapping back button to go back to Add field pg

[jponikarchuk]

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.1.89-4
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: Exploratory around #67191
Email or phone of affected tester (no customers): applausetester+ck482025@applause.expensifail.com
Issue reported by: Applause Internal Team
Device used: Pixel 8a/Android 15
App Component: Workspace Settings

Action Performed:

1. Launch Hybrid app on Android device
2. Go to Workspace settings >> Reports (upgrade to control if not done before)
3. Tap on Add Field >> Click on Name field
4. Do not enter any text, tap on back button to go back to add field page (Note: Keypad appears briefly when navigating back)
5. Tap on type field >> select Text type
6. Click Initial value field
7. Do not enter any text, tap on back button to go back to add field page (Note: Keypad appears briefly when navigating back)

Expected Result:

Keypad should not appear briefly at the bottom when tapping on back button to navigate back to add field page

Actual Result:

Keypad appears briefly on tapping back button to go back to Add field page

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021953701030105266250
• Upwork Job ID: 1953701030105266250
• Last Price Increase: 2025-11-21
• Automatic offers:
• QichenZhu | Reviewer | 109896590

Issue Owner

Current Issue Owner: @RachCHopkins

[melvin-bot]

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

[Krishna2323]

Proposal

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

Workspace - Keypad appears briefly on tapping back button to go back to Add field pg

What is the root cause of that problem?

• We do not close the keyboard before setting the modal visibility to false.
  

  App/src/components/TextPicker/index.tsx

  Lines 24 to 26 in f2851aa

  	const hidePickerModal = () => {
  	setIsPickerVisible(false);
  	};

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

• Call Keyboard.dismiss.

        KeyboardUtils.dismiss().then(() => {
            setIsPickerVisible(false);
        });

• Or we can call Keyboard.dismiss in TextSelectorModal.
  

  App/src/components/TextPicker/TextSelectorModal.tsx

  Lines 46 to 51 in b1f9003

  	const hide = useCallback(() => {
  	onClose();
  	if (shouldClearOnClose) {
  	setValue('');
  	}
  	}, [onClose, shouldClearOnClose]);

• Also check for similar bugs in other modal screens like this.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

What alternative solutions did you explore? (Optional)

• We can update the Modal component to dismiss the modal when hiding, we can also consider adding a flag for that.

Result

[RachCHopkins]

Ok that's really weird and I'm not on that version so I can't repro. Will have to take your word for it!

[melvin-bot]

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

[melvin-bot]

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

[dmkt9]

Proposal

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

Keypad appears briefly on tapping back button to go back to Add field page

What is the root cause of that problem?

1. Since here we use shouldUseReanimatedModal for Modal:
   

   App/src/components/TextPicker/TextSelectorModal.tsx

   Line 124 in dd11c95

   shouldUseReanimatedModal

   
   So ModalComponent will use ReanimatedModal instead of ReactNativeModal:
   

   App/src/components/Modal/BaseModal.tsx

   Lines 61 to 63 in dd11c95

   	if ((type && REANIMATED_MODAL_TYPES.includes(type)) || shouldUseReanimatedModal) {
   	return (
   	<ReanimatedModal

2. In ReanimatedModal we have similar logic ReactNativeModal (react-native-modal library) but with a difference, in which we use Animated from react-native-reanimated to create containerView:
   

   App/src/components/Modal/ReanimatedModal/index.tsx

   Lines 146 to 147 in dd11c95

   	const containerView = (
   	<Container

   
   

   App/src/components/Modal/ReanimatedModal/Container/index.tsx

   Lines 58 to 62 in dd11c95

   	<Animated.View
   	style={[styles.modalAnimatedContainer, type !== CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED && styles.flex1]}
   	entering={Entering}
   	exiting={Exiting}
   	>

3. On Android, TextInput does not lose focus immediately when we click on another component like on the web (to lose focus we have to handle the event when clicking on another area and call blur for TextInput), so blur processing will be slower than web.

4. Android does not have time to handle focus cancellation
   When TextInput is in focus and the component is suddenly unmounted (for example when Modal is closed), Android still keeps the keyboard open. But because the view has disappeared, it has no point to "anchor" the keyboard → the keyboard is closed immediately.

5. Reanimated Modal can delay unmounting or layout processing during animation. This makes Android "think" that the keyboard needs to open, then immediately realize that there is no view → the keyboard is closed.

Note: If you set the log on TextInput's onBlur, you can see that this event is not triggered on Android.

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

There are a few options:

1. Option 1: Remove shouldUseReanimatedModal:
   

   App/src/components/TextPicker/TextSelectorModal.tsx

   Line 124 in dd11c95

   shouldUseReanimatedModal

2. Option 2: Use setTimeout with appropriate time here to give the system time to process the blur event and for the keyboard:
   

   App/src/components/Modal/ReanimatedModal/index.tsx

   Line 115 in dd11c95

   setIsVisibleState(false);

   
   Example:

setTimeout(() => setIsVisibleState(false), Keyboard.isVisible() ? animationOutTiming : 0);

3. Option 3: Use KeyboardUtils.dissmis() here, ensuring the keyboard is closed completely and also allowing time for the system to handle the blur event:
   

   App/src/components/Modal/ReanimatedModal/index.tsx

   Line 115 in dd11c95

   setIsVisibleState(false);

KeyboardUtils.dismiss().then(() => setIsVisibleState(false));

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

NA

What alternative solutions did you explore? (Optional)

NA

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

Result:

Option 2:

Screencast.from.2025-08-10.21-26-33.webm

Option 3:

Screencast.from.2025-08-10.21-27-14.webm