URI bar text visible from the left when it's not focused

This commit is contained in:
Akinwale Ariwodola 2018-08-17 15:08:19 +01:00
parent 82a7846e6d
commit 684f4867c3

View file

@ -14,6 +14,7 @@ class UriBar extends React.PureComponent {
componentDidMount () { componentDidMount () {
this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide); this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
this.setSelection();
} }
componentWillUnmount() { componentWillUnmount() {
@ -64,6 +65,12 @@ class UriBar extends React.PureComponent {
this.setState({ focused: false }); this.setState({ focused: false });
} }
setSelection() {
if (this.textInput) {
this.textInput.setNativeProps({ selection: { start: 0, end: 0 }});
}
}
render() { render() {
const { navigation, suggestions, updateSearchQuery, value } = this.props; const { navigation, suggestions, updateSearchQuery, value } = this.props;
if (this.state.currentValue === null) { if (this.state.currentValue === null) {
@ -90,6 +97,7 @@ class UriBar extends React.PureComponent {
<View style={uriBarStyle.uriContainer}> <View style={uriBarStyle.uriContainer}>
<TextInput ref={(ref) => { this.textInput = ref }} <TextInput ref={(ref) => { this.textInput = ref }}
style={uriBarStyle.uriText} style={uriBarStyle.uriText}
onLayout={() => { this.setSelection(); }}
selectTextOnFocus={true} selectTextOnFocus={true}
placeholder={'Search for videos, music, games and more'} placeholder={'Search for videos, music, games and more'}
underlineColorAndroid={'transparent'} underlineColorAndroid={'transparent'}
@ -100,7 +108,10 @@ class UriBar extends React.PureComponent {
inlineImageLeft={'baseline_search_black_24'} inlineImageLeft={'baseline_search_black_24'}
inlineImagePadding={16} inlineImagePadding={16}
onFocus={() => this.setState({ focused: true })} onFocus={() => this.setState({ focused: true })}
onBlur={() => this.setState({ focused: false })} onBlur={() => {
this.setState({ focused: false });
this.setSelection();
}}
onChangeText={this.handleChangeText} onChangeText={this.handleChangeText}
onSubmitEditing={() => { onSubmitEditing={() => {
if (this.state.inputText) { if (this.state.inputText) {