mWeb - Blank space above the keyboard after closing native emoji picker

[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: v9.2.66-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: https://test-management.browserstack.com/projects/2219752/test-runs/TR-2221/folder/13176723/41237047/1045231321?sort=%2Bidentifier
Email or phone of affected tester (no customers): n/a
Issue reported by: Applause Internal Team
Device used: iPhone 13 iOS 18.6.2 Safari
App Component: Chat Report View

Action Performed:

1. Navigate to https://staging.new.expensify.com
2. Navigate to any chat
3. Tap the composer to open the keyboard
4. Tap the icon to open the native emoji picker
5. Close the native emoji picker

Expected Result:

No blank space should appear above the keyboard after closing the iOS native emoji picker

Actual Result:

A blank space appears above the keyboard after closing the iOS native emoji picker

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

[melvin-bot]

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

[abbasifaizan70]

Proposal

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

When using the Expensify app on iOS Safari:

1. User navigates to any chat
2. User taps the composer to open the keyboard
3. User taps the emoji icon on the iOS keyboard to open the native emoji picker
4. User closes the native emoji picker

Expected Result: No blank space should appear above the keyboard after closing the iOS native emoji picker.

Actual Result: A blank space appears above the keyboard after closing the iOS native emoji picker.

What is the root cause of that problem?

The root cause is that the keyboard visibility detection system incorrectly interprets the iOS native emoji picker's viewport height changes as keyboard visibility changes.

1. Keyboard Visibility Detection: The app uses viewport height changes to detect keyboard visibility. In App/src/utils/keyboard/index.website.ts, the handleResize function listens to visualViewport resize events and determines keyboard visibility by comparing the current viewport height to the initial viewport height.

2. iOS Native Emoji Picker Behavior: When the iOS native emoji picker opens, it changes the viewport height (similar to how the keyboard does). When it closes, the viewport height changes again. These viewport resize events are detected by the keyboard visibility system.

3. The Problem:

   • When the native emoji picker opens, the viewport height decreases, triggering a "keyboard visible" state
   • When the native emoji picker closes, the viewport height increases, but the keyboard is still actually visible (the regular keyboard remains open)
   • The keyboard visibility detection may incorrectly calculate the keyboard state, causing components like BaseKeyboardAvoidingView or other keyboard-aware components to apply incorrect padding/spacing
   • This results in a blank space appearing above the keyboard

4. Why This Happens: The viewport height change detection doesn't distinguish between:

   • The keyboard opening/closing
   • The native emoji picker opening/closing (while keyboard is already open)
   • Other viewport changes (like Safari's address bar appearing/disappearing)

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

The solution is to improve the keyboard visibility detection to ignore viewport changes that occur when the native emoji picker opens/closes while the keyboard is already visible.

Approach:

1. Detect Native Emoji Picker State: When the viewport height changes, check if the keyboard is already visible. If it is, and the viewport change is small (indicating emoji picker toggle rather than keyboard toggle), ignore the change.

2. Improve Keyboard Visibility Logic: Update App/src/utils/keyboard/index.website.ts to:

   • Track the previous keyboard state
   • When a viewport resize occurs, check if the keyboard was already visible
   • If keyboard was visible and the viewport height change is within a small threshold (e.g., less than 50px difference), don't update the keyboard visibility state
   • This prevents the emoji picker's viewport changes from being misinterpreted as keyboard visibility changes

3. Alternative Approach: Add a debounce or delay to keyboard visibility updates to filter out rapid viewport changes that occur when the emoji picker opens/closes.

Implementation Details:

• Modify the handleResize function in App/src/utils/keyboard/index.website.ts to be smarter about detecting actual keyboard visibility vs. emoji picker visibility
• Add logic to compare the magnitude of viewport height changes - small changes while keyboard is already visible should be ignored
• Ensure the fix only applies to iOS Safari to avoid affecting other platforms

What alternative solutions did you explore? (Optional)

N/A