Page MenuHomePhabricator

[native] Fix onBlur occurring on every tap
ClosedPublic

Authored by ashoat on Jun 3 2024, 4:36 AM.
Tags
None
Referenced Files
F2897459: D12276.diff
Fri, Oct 4, 11:34 PM
Unknown Object (File)
Mon, Sep 9, 10:41 AM
Unknown Object (File)
Mon, Sep 9, 10:41 AM
Unknown Object (File)
Mon, Sep 9, 10:40 AM
Unknown Object (File)
Mon, Sep 9, 10:08 AM
Unknown Object (File)
Fri, Sep 6, 9:10 PM
Unknown Object (File)
Fri, Sep 6, 3:24 PM
Unknown Object (File)
Sep 4 2024, 6:07 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
No Lint Coverage
Unit
No Test Coverage

Event Timeline

native/navigation/community-drawer-navigator.react.js
58

Docs here

native/navigation/tab-navigator.react.js
207–213

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.