Skip to content

Commit

Permalink
Use native ref instead of tag to focus and blur
Browse files Browse the repository at this point in the history
This fixes the console error:
focusTextInput must be called with a host component. Passing a react tag is deprecated.
  • Loading branch information
ceyhun committed Sep 23, 2020
1 parent d401688 commit 47bd771
Showing 1 changed file with 6 additions and 3 deletions.
9 changes: 6 additions & 3 deletions packages/react-native-aztec/src/AztecView.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ import { ENTER, BACKSPACE } from '@wordpress/keycodes';
const AztecManager = UIManager.getViewManagerConfig( 'RCTAztecView' );

class AztecView extends React.Component {
nativeComponentRef = React.createRef();

constructor() {
super( ...arguments );
this._onContentSizeChange = this._onContentSizeChange.bind( this );
Expand Down Expand Up @@ -125,7 +127,7 @@ class AztecView extends React.Component {

_onBlur( event ) {
this.selectionEndCaretY = null;
TextInputState.blurTextInput( ReactNative.findNodeHandle( this ) );
TextInputState.blurTextInput( this.nativeComponentRef.current );

if ( ! this.props.onBlur ) {
return;
Expand Down Expand Up @@ -177,11 +179,11 @@ class AztecView extends React.Component {
}

blur() {
TextInputState.blurTextInput( ReactNative.findNodeHandle( this ) );
TextInputState.blurTextInput( this.nativeComponentRef.current );
}

focus() {
TextInputState.focusTextInput( ReactNative.findNodeHandle( this ) );
TextInputState.focusTextInput( this.nativeComponentRef.current );
}

isFocused() {
Expand Down Expand Up @@ -244,6 +246,7 @@ class AztecView extends React.Component {
// combination generate an infinite loop as described in https://github.com/wordpress-mobile/gutenberg-mobile/issues/302
onFocus={ this._onAztecFocus }
onBlur={ this._onBlur }
ref={ this.nativeComponentRef }
/>
</TouchableWithoutFeedback>
);
Expand Down

0 comments on commit 47bd771

Please sign in to comment.