From 32e53168178992937770dd8d3e9ecc366c8045de Mon Sep 17 00:00:00 2001
From: Sudheer <sudheer.105@gmail.com>
Date: Wed, 29 Aug 2018 15:44:20 +0530
Subject: [PATCH] MM-11684 Fix grey highlight in the text fields in user
 profile (#2034)

* Fix jumpto search highlight
* Change background style to be on view and rest of
input styles to input
---
 app/components/search_bar/search_box.js       | 81 ++++++++++---------
 app/screens/edit_profile/edit_profile_item.js | 26 +++---
 2 files changed, 55 insertions(+), 52 deletions(-)

diff --git a/app/components/search_bar/search_box.js b/app/components/search_bar/search_box.js
index 07ab94aac..f9dee6d91 100644
--- a/app/components/search_bar/search_box.js
+++ b/app/components/search_bar/search_box.js
@@ -330,6 +330,7 @@ export default class Search extends Component {
     };
 
     render() {
+        const {backgroundColor, ...restOfInputPropStyles} = this.props.inputStyle;
         return (
             <Animated.View
                 ref='searchContainer'
@@ -339,45 +340,47 @@ export default class Search extends Component {
                 ]}
                 onLayout={this.onLayout}
             >
-                <AnimatedTextInput
-                    ref='input_keyword'
-                    style={[
-                        styles.input,
-                        this.props.placeholderTextColor && {color: this.props.placeholderTextColor},
-                        this.props.inputStyle && this.props.inputStyle,
-                        this.props.inputHeight && {height: this.props.inputHeight},
-                        this.props.inputBorderRadius && {borderRadius: this.props.inputBorderRadius},
-                        {
-                            width: this.inputFocusWidthAnimated,
-                            paddingLeft: this.inputFocusPlaceholderAnimated,
-                        },
-                        this.props.shadowVisible && {
-                            shadowOffset: {width: this.props.shadowOffsetWidth, height: this.shadowHeight},
-                            shadowColor: this.props.shadowColor,
-                            shadowOpacity: this.shadowOpacityAnimated,
-                            shadowRadius: this.props.shadowRadius,
-                        },
+                <View style={{backgroundColor}}>
+                    <AnimatedTextInput
+                        ref='input_keyword'
+                        style={[
+                            styles.input,
+                            this.props.placeholderTextColor && {color: this.props.placeholderTextColor},
+                            this.props.inputHeight && {height: this.props.inputHeight},
+                            this.props.inputBorderRadius && {borderRadius: this.props.inputBorderRadius},
+                            {
+                                width: this.inputFocusWidthAnimated,
+                                paddingLeft: this.inputFocusPlaceholderAnimated,
+                            },
+                            restOfInputPropStyles,
+                            this.props.shadowVisible && {
+                                shadowOffset: {width: this.props.shadowOffsetWidth, height: this.shadowHeight},
+                                shadowColor: this.props.shadowColor,
+                                shadowOpacity: this.shadowOpacityAnimated,
+                                shadowRadius: this.props.shadowRadius,
+                            },
 
-                    ]}
-                    autoFocus={this.props.autoFocus}
-                    editable={this.props.editable}
-                    value={this.props.value}
-                    onChangeText={this.onChangeText}
-                    placeholder={this.placeholder}
-                    placeholderTextColor={this.props.placeholderTextColor}
-                    selectionColor={this.props.selectionColor}
-                    onSubmitEditing={this.onSearch}
-                    onSelectionChange={this.onSelectionChange}
-                    autoCorrect={false}
-                    blurOnSubmit={this.props.blurOnSubmit}
-                    returnKeyType={this.props.returnKeyType || 'search'}
-                    keyboardType={this.props.keyboardType || 'default'}
-                    autoCapitalize={this.props.autoCapitalize}
-                    onBlur={this.onBlur}
-                    onFocus={this.onFocus}
-                    underlineColorAndroid='transparent'
-                    enablesReturnKeyAutomatically={true}
-                />
+                        ]}
+                        autoFocus={this.props.autoFocus}
+                        editable={this.props.editable}
+                        value={this.props.value}
+                        onChangeText={this.onChangeText}
+                        placeholder={this.placeholder}
+                        placeholderTextColor={this.props.placeholderTextColor}
+                        selectionColor={this.props.selectionColor}
+                        onSubmitEditing={this.onSearch}
+                        onSelectionChange={this.onSelectionChange}
+                        autoCorrect={false}
+                        blurOnSubmit={this.props.blurOnSubmit}
+                        returnKeyType={this.props.returnKeyType || 'search'}
+                        keyboardType={this.props.keyboardType || 'default'}
+                        autoCapitalize={this.props.autoCapitalize}
+                        onBlur={this.onBlur}
+                        onFocus={this.onFocus}
+                        underlineColorAndroid='transparent'
+                        enablesReturnKeyAutomatically={true}
+                    />
+                </View>
                 <TouchableWithoutFeedback onPress={this.onFocus}>
                     {((this.props.iconSearch) ?
                         <Animated.View
@@ -469,7 +472,6 @@ const styles = StyleSheet.create({
         paddingBottom: 5,
         paddingRight: 32,
         borderColor: '#444',
-        backgroundColor: '#f7f7f7',
         borderRadius: 5,
         fontSize: 15,
     },
@@ -504,4 +506,3 @@ const styles = StyleSheet.create({
         color: '#fff',
     },
 });
-
diff --git a/app/screens/edit_profile/edit_profile_item.js b/app/screens/edit_profile/edit_profile_item.js
index 7dc784027..d0509f60d 100644
--- a/app/screens/edit_profile/edit_profile_item.js
+++ b/app/screens/edit_profile/edit_profile_item.js
@@ -66,18 +66,20 @@ export default class AccountSettingsItem extends PureComponent {
                     )}
                 </View>
                 <View style={style.inputContainer}>
-                    <QuickTextInput
-                        ref={this.channelNameRef}
-                        value={value}
-                        onChangeText={this.onChangeText}
-                        style={[style.input, disabled ? style.disabled : null]}
-                        autoCapitalize='none'
-                        autoCorrect={false}
-                        maxLength={this.props.maxLength}
-                        editable={!disabled}
-                        underlineColorAndroid='transparent'
-                        disableFullscreenUI={true}
-                    />
+                    <View style={disabled ? style.disabled : null}>
+                        <QuickTextInput
+                            ref={this.channelNameRef}
+                            value={value}
+                            onChangeText={this.onChangeText}
+                            style={style.input}
+                            autoCapitalize='none'
+                            autoCorrect={false}
+                            maxLength={this.props.maxLength}
+                            editable={!disabled}
+                            underlineColorAndroid='transparent'
+                            disableFullscreenUI={true}
+                        />
+                    </View>
                     {disabled &&
                     <Text style={style.helpText}>
                         {helpText}