Skip to content
This repository was archived by the owner on Feb 25, 2020. It is now read-only.

[Fix RN TextInput focus bug with react-navigation] Add a condition to blur the currently focused textinput #6

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
+21 −4
Open

[Fix RN TextInput focus bug with react-navigation] Add a condition to blur the currently focused textinput #6

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 21 additions & 4 deletions src/createKeyboardAwareNavigator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { TextInput } from 'react-native';
import { TextInput, UIManager } from 'react-native';

export default (Navigator, navigatorConfig) =>
class KeyboardAwareNavigator extends React.Component {
Expand Down Expand Up @@ -43,9 +43,26 @@ export default (Navigator, navigatorConfig) =>
// in the case where the index did not change, I believe. We
// should revisit this after 2.0 release.
if (transitionProps.index !== prevTransitionProps.index) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This also looks like a real bug to me. Instead of comparing the index, we should see if the active key has changed. Something like this:

const lastActiveKey = prevTransitionProps.state.routes[prevTransitionProps.state.index].key;
const activeKey = transitionProps.state.routes[transitionProps.state.index].key;
if (lastActiveKey !== activeKey) {
  ...

Theoretically this could be an issue if a screen index changes but it stays active

const currentField = TextInput.State.currentlyFocusedField();
if (currentField) {
TextInput.State.blurTextInput(currentField);
const currentFocusedField = TextInput.State.currentlyFocusedField();
if (currentFocusedField) {
const previousSceneTag =
prevTransitionProps &&
prevTransitionProps.scene &&
prevTransitionProps.scene.route &&
prevTransitionProps.scene.route.params &&
prevTransitionProps.scene.route.params.nodeTag;
if (previousSceneTag) {
UIManager.viewIsDescendantOf(
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this native call will be slow, and we shouldn't need to call into native APIs for this use case, because JS should already have awareness of what is focused

currentFocusedField,
previousSceneTag,
isDescendant => {
if (isDescendant)
TextInput.State.blurTextInput(currentFocusedField);
}
);
} else {
TextInput.State.blurTextInput(currentFocusedField);
}
}
}

Expand Down