Skip to content

Commit

Permalink
SmartUrlInput: Remove workaround for an RN bug that's less bothersome…
Browse files Browse the repository at this point in the history
… now

Less bothersome because, after the previous commit, the only
remaining .focus() call is for convenience (autofocus when
back-navigating to the screen), not necessity.

With this RN bug, whether we work around it or not, it remains
possible to focus a TextInput by tapping on it.

So why "necessity"? Before the previous commit, we had a hack where
text elements were trying to blend in as part of a TextInput, with
the real TextInput being as little as 1px wide when empty. So,
pressing the text elements was an important way to give the input
focus, and that was achieved with .focus().
  • Loading branch information
chrisbobbe committed Apr 5, 2022
1 parent 9bdac88 commit 9303039
Showing 1 changed file with 1 addition and 56 deletions.
57 changes: 1 addition & 56 deletions src/common/SmartUrlInput.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/* @flow strict-local */
import React, { useState, useRef, useCallback, useContext } from 'react';
import type { Node } from 'react';
import { Platform, TextInput, View, Keyboard } from 'react-native';
import { TextInput, View } from 'react-native';
import { useFocusEffect } from '@react-navigation/native';
import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet';

Expand Down Expand Up @@ -32,59 +32,6 @@ type Props = $ReadOnly<{|
enablesReturnKeyAutomatically: boolean,
|}>;

/**
* Work around https://github.com/facebook/react-native/issues/19366.
*
* The bug: If the keyboard is dismissed only by pressing the built-in
* Android back button, then the next time you call `.focus()` on the
* input, the keyboard won't open again. On the other hand, if you call
* `.blur()`, then the keyboard *will* open the next time you call
* `.focus()`.
*
* This workaround: Call `.blur()` on the input whenever the keyboard is
* closed, because it might have been closed by the built-in Android back
* button. Then when we call `.focus()` the next time, it will open the
* keyboard, as expected. (We only maintain that keyboard-closed listener
* when this SmartUrlInput is on the screen that's focused in the
* navigation.)
*
* Other workarounds that didn't work:
* - When it comes time to do a `.focus()`, do a sneaky `.blur()` first,
* then do the `.focus()` 100ms later. It's janky. This was #2078,
* probably inspired by
* https://github.com/facebook/react-native/issues/19366#issuecomment-400603928.
* - Use RN's `BackHandler` to actually listen for the built-in Android back
* button being used. That didn't work; the event handler wasn't firing
* for either `backPress` or `hardwareBackPress` events. (We never
* committed a version of this workaround.)
*/
function useRn19366Workaround(textInputRef) {
if (Platform.OS !== 'android') {
return;
}

// (Disabling `react-hooks/rules-of-hooks` here is fine; the relevant rule
// is not to call Hooks conditionally. But the platform conditional won't
// vary in its behavior between multiple renders.)

// eslint-disable-next-line react-hooks/rules-of-hooks
useFocusEffect(
// eslint-disable-next-line react-hooks/rules-of-hooks
React.useCallback(() => {
const handleKeyboardDidHide = () => {
if (textInputRef.current) {
// `.current` is not type-checked; see definition.
textInputRef.current.blur();
}
};

Keyboard.addListener('keyboardDidHide', handleKeyboardDidHide);

return () => Keyboard.removeListener('keyboardDidHide', handleKeyboardDidHide);
}, [textInputRef]),
);
}

export default function SmartUrlInput(props: Props): Node {
const { style, onChangeText, onSubmitEditing, enablesReturnKeyAutomatically } = props;

Expand Down Expand Up @@ -126,8 +73,6 @@ export default function SmartUrlInput(props: Props): Node {
[onChangeText],
);

useRn19366Workaround(textInputRef);

return (
<View style={[styles.wrapper, style]}>
<TextInput
Expand Down

0 comments on commit 9303039

Please sign in to comment.