Page MenuHomePhabricator

[native] Fix onBlur occurring on every tap
ClosedPublic

Authored by ashoat on Jun 3 2024, 4:36 AM.
Tags
None
Referenced Files
Unknown Object (File)
Sat, Nov 2, 6:26 AM
Unknown Object (File)
Sat, Nov 2, 6:26 AM
Unknown Object (File)
Sat, Nov 2, 6:26 AM
Unknown Object (File)
Sat, Nov 2, 6:06 AM
Unknown Object (File)
Thu, Oct 10, 10:12 PM
Unknown Object (File)
Thu, Oct 10, 10:12 PM
Unknown Object (File)
Thu, Oct 10, 10:12 PM
Unknown Object (File)
Thu, Oct 10, 10:12 PM
Subscribers
None

Details

Summary

Ever since we introduced the CommunityDrawerNavigator, we've had an issue where any tap will trigger a TextInput onBlur

In ENG-8326, I investigated this issue in the context of ChatThreadListSearch's clear button causing a keyboard dismissal. I investigated by iteratively disabling parts of the application, including the navigation stack. That helped me identify that CommunityDrawerNavigator is responsible.

Once I figured that out, I was able to restore the old behavior by introducing keyboardDismissMode: 'none'. This also seems to address ENG-8325.

Now that the keyboard is not handled directly by the navigator, I added some code to TabNavigator to make sure we dismiss the keyboard when the drawer is focused. While this isn't as ideal as @react-navigation/stack's keyboard manager (which dismisses the keyboard when a gesture is started, and can refocus the keyboard if the gesture is abandoned), using that behavior isn't possible here because @react-navigation/drawer doesn't expose a way for us to know when a gesture begins or is cancelled.

Test Plan

I tested and confirmed both ENG-8326 and ENG-8325 are resolved on my local iOS simulator

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

native/navigation/community-drawer-navigator.react.js
58 ↗(On Diff #40840)

Docs here

native/navigation/tab-navigator.react.js
207–213 ↗(On Diff #40840)

I initially tried to put this logic inside CommunityDrawerNavigator, where it seems like it naturally belongs. Unfortunately that resulted in an error:

Error: Couldn't find a drawer. Is your component inside a drawer navigator?

It looks like I need to put this logic inside a component rendered by CommunityDrawerNavigator. The first such component is TabNavigator, so I decided to put it here.

ashoat requested review of this revision.Jun 3 2024, 4:51 AM
This revision is now accepted and ready to land.Jun 4 2024, 1:07 AM
This revision was automatically updated to reflect the committed changes.