Use setTimeout hack (again) to get paste context in token search (#1548)

* Use setTimeout hack (again) to get paste context in token search * Update test Co-authored-by: Esteban Miño <[email protected]>
MetaMask · May 12, 2020 · b6cfb3b · b6cfb3b
1 parent 97a5ee3
commit b6cfb3b
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 9 deletions.
diff --git a/app/components/UI/AssetSearch/__snapshots__/index.test.js.snap b/app/components/UI/AssetSearch/__snapshots__/index.test.js.snap
@@ -34,11 +34,15 @@ exports[`AssetSearch should render correctly 1`] = `
     placeholderTextColor="#d6d9dc"
     rejectResponderTermination={true}
     style={
-      Object {
-        "flex": 1,
-        "fontFamily": "CircularStd-Medium",
-        "fontWeight": "400",
-      }
+      Array [
+        Object {
+          "fontFamily": "CircularStd-Medium",
+          "fontWeight": "400",
+        },
+        Object {
+          "width": "85%",
+        },
+      ]
     }
     testID="input-search-asset"
     underlineColorAndroid="transparent"

diff --git a/app/components/UI/AssetSearch/index.js b/app/components/UI/AssetSearch/index.js
@@ -20,7 +20,6 @@ const styles = StyleSheet.create({
 		borderColor: colors.grey100
 	},
 	textInput: {
-		flex: 1,
 		...fontStyles.normal
 	},
 	icon: {
@@ -50,7 +49,8 @@ const fuse = new Fuse(contractList, {
  */
 export default class AssetSearch extends PureComponent {
 	state = {
-		searchQuery: ''
+		searchQuery: '',
+		inputWidth: '85%'
 	};
 
 	static propTypes = {
@@ -60,6 +60,10 @@ export default class AssetSearch extends PureComponent {
 		onSearch: PropTypes.func
 	};
 
+	componentDidMount() {
+		setTimeout(() => this.setState({ inputWidth: '86%' }), 100);
+	}
+
 	handleSearch = searchQuery => {
 		this.setState({ searchQuery });
 		const fuseSearchResult = fuse.search(searchQuery);
@@ -71,13 +75,13 @@ export default class AssetSearch extends PureComponent {
 	};
 
 	render = () => {
-		const { searchQuery } = this.state;
+		const { searchQuery, inputWidth } = this.state;
 
 		return (
 			<View style={styles.searchSection} testID={'add-searched-token-screen'}>
 				<Icon name="search" size={22} style={styles.icon} />
 				<TextInput
-					style={styles.textInput}
+					style={[styles.textInput, { width: inputWidth }]}
 					value={searchQuery}
 					placeholder={strings('token.search_tokens_placeholder')}
 					placeholderTextColor={colors.grey100}