From fac57184cdb63a91f4806fcc174cffdea236344a Mon Sep 17 00:00:00 2001 From: Chip Date: Fri, 7 Feb 2020 12:45:15 -0500 Subject: [PATCH] [RNMobile] Enable Dismiss on PlainText in Android (#20095) * Add flag for determining if running on Android * Enable Dismiss button on PlainText. Enable show keyboard in Android on PlainText mount * Enable Dismiss button on PlainText. Enable show keyboard in Android on PlainText mount --- .../src/components/plain-text/index.native.js | 28 ++++++++++++++----- 1 file changed, 21 insertions(+), 7 deletions(-) diff --git a/packages/block-editor/src/components/plain-text/index.native.js b/packages/block-editor/src/components/plain-text/index.native.js index aeebb66b567d2..9ddb1fba7465c 100644 --- a/packages/block-editor/src/components/plain-text/index.native.js +++ b/packages/block-editor/src/components/plain-text/index.native.js @@ -16,25 +16,39 @@ import styles from './style.scss'; export default class PlainText extends Component { constructor() { super( ...arguments ); - this.isIOS = Platform.OS === 'ios'; + this.isAndroid = Platform.OS === 'android'; } componentDidMount() { // if isSelected is true, we should request the focus on this TextInput - if ( - this._input.isFocused() === false && - this._input.props.isSelected === true - ) { - this.focus(); + if ( this._input.isFocused() === false && this.props.isSelected ) { + if ( this.isAndroid ) { + /* + * There seems to be an issue in React Native where the keyboard doesn't show if called shortly after rendering. + * As a common work around this delay is used. + * https://github.com/facebook/react-native/issues/19366#issuecomment-400603928 + */ + this.timeoutID = setTimeout( () => { + this._input.focus(); + }, 100 ); + } else { + this._input.focus(); + } } } componentDidUpdate( prevProps ) { - if ( ! this.props.isSelected && prevProps.isSelected && this.isIOS ) { + if ( ! this.props.isSelected && prevProps.isSelected ) { this._input.blur(); } } + componentWillUnmount() { + if ( this.isAndroid ) { + clearTimeout( this.timeoutID ); + } + } + focus() { this._input.focus(); }