From 99db6d824d758e3399a7bcd9d0a40c32d2815a6c Mon Sep 17 00:00:00 2001
From: Danish Ahmed Mirza <danishmirza30602@gmail.com>
Date: Tue, 28 Jun 2022 03:00:21 +0530
Subject: [PATCH] Fix keyboard dismiss on emoji press

---
 app/containers/MessageBox/EmojiSearchbar.tsx | 40 +++++++++-----------
 app/containers/MessageBox/index.tsx          |  5 ++-
 app/containers/MessageBox/styles.ts          | 18 ++++++++-
 3 files changed, 38 insertions(+), 25 deletions(-)

diff --git a/app/containers/MessageBox/EmojiSearchbar.tsx b/app/containers/MessageBox/EmojiSearchbar.tsx
index 7fe4d0662..433da45c8 100644
--- a/app/containers/MessageBox/EmojiSearchbar.tsx
+++ b/app/containers/MessageBox/EmojiSearchbar.tsx
@@ -10,6 +10,7 @@ import { IEmoji } from '../../definitions';
 import shortnameToUnicode from '../../lib/methods/helpers/shortnameToUnicode';
 import CustomEmoji from '../EmojiPicker/CustomEmoji';
 import database from '../../lib/database';
+import styles from './styles';
 
 interface IEmojiSearchbarProps {
 	openEmoji: () => void;
@@ -21,14 +22,13 @@ interface IEmojiSearchbarProps {
 
 const renderEmoji = (emoji: IEmoji, size: number, baseUrl: string) => {
 	if (emoji.name) {
-		return <CustomEmoji style={{ height: size, width: size }} emoji={emoji} baseUrl={baseUrl} />;
+		return <CustomEmoji style={{ height: size, width: size, margin: 4 }} emoji={emoji} baseUrl={baseUrl} />;
 	}
-	return <Text style={{ fontSize: size }}>{shortnameToUnicode(`:${emoji}:`)}</Text>;
+	return <Text style={[styles.searchedEmoji, { fontSize: size }]}>{shortnameToUnicode(`:${emoji}:`)}</Text>;
 };
 
 const EmojiSearchbar = React.forwardRef<TextInput, IEmojiSearchbarProps>(
 	({ openEmoji, onChangeText, emojis, onEmojiSelected, baseUrl }, ref) => {
-		console.log('Emojis', emojis);
 		const { colors, theme } = useTheme();
 		const [searchText, setSearchText] = useState<string>('');
 		const [frequentlyUsed, setFrequentlyUsed] = useState([]);
@@ -60,7 +60,7 @@ const EmojiSearchbar = React.forwardRef<TextInput, IEmojiSearchbarProps>(
 		const renderItem = (emoji: IEmoji) => {
 			const emojiSize = 30;
 			return (
-				<View style={{ justifyContent: 'center', marginHorizontal: 2 }}>
+				<View style={[styles.emojiContainer]}>
 					<TouchableOpacity
 						activeOpacity={0.7}
 						// @ts-ignore
@@ -72,22 +72,18 @@ const EmojiSearchbar = React.forwardRef<TextInput, IEmojiSearchbarProps>(
 			);
 		};
 		return (
-			<View>
-				<View style={{ height: 50, paddingHorizontal: 5 }}>
-					<FlatList horizontal data={searchText ? emojis : frequentlyUsed} renderItem={({ item }) => renderItem(item)} />
-				</View>
-				<View
-					style={{
-						flexDirection: 'row',
-						height: 50,
-						marginVertical: 10,
-						justifyContent: 'center',
-						alignItems: 'center'
-					}}>
-					<TouchableOpacity
-						style={{ marginHorizontal: 10, justifyContent: 'center', height: '100%' }}
-						activeOpacity={0.7}
-						onPress={openEmoji}>
+			<View style={{ borderTopWidth: 1, borderTopColor: colors.borderColor }}>
+				<FlatList
+					horizontal
+					data={searchText ? emojis : frequentlyUsed}
+					renderItem={({ item }) => renderItem(item)}
+					showsHorizontalScrollIndicator={false}
+					keyExtractor={item => item.name || item.content}
+					contentContainerStyle={styles.emojiListContainer}
+					keyboardShouldPersistTaps='always'
+				/>
+				<View style={styles.emojiSearchbarContainer}>
+					<TouchableOpacity style={styles.openEmojiKeyboard} activeOpacity={0.7} onPress={openEmoji}>
 						<CustomIcon name='chevron-left' size={30} color={colors.collapsibleChevron} />
 					</TouchableOpacity>
 					<View style={{ flex: 1 }}>
@@ -100,8 +96,8 @@ const EmojiSearchbar = React.forwardRef<TextInput, IEmojiSearchbarProps>(
 							returnKeyType='search'
 							underlineColorAndroid='transparent'
 							onChangeText={handleTextChange}
-							style={{ backgroundColor: colors.passcodeButtonActive, padding: 10, borderRadius: 5 }}
-							containerStyle={{ height: '100%', justifyContent: 'center', marginBottom: 0, marginRight: 15 }}
+							style={[styles.emojiSearchbar, { backgroundColor: colors.passcodeButtonActive }]}
+							containerStyle={styles.textInputContainer}
 							value={searchText}
 							theme={theme}
 							onClearInput={() => handleTextChange('')}
diff --git a/app/containers/MessageBox/index.tsx b/app/containers/MessageBox/index.tsx
index 84d5008a0..6e54b195e 100644
--- a/app/containers/MessageBox/index.tsx
+++ b/app/containers/MessageBox/index.tsx
@@ -624,9 +624,10 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
 				this.setShowSend(true);
 				break;
 			case EventTypes.SEARCH_PRESSED:
-				this.setState({ showEmojiKeyboard: false, showEmojiSearchbar: true }, () => {
+				this.setState({ showEmojiKeyboard: false, showEmojiSearchbar: true });
+				setTimeout(() => {
 					this.emojiSearchbarRef.current.focus();
-				});
+				}, 400);
 				break;
 			default:
 			// Do nothing
diff --git a/app/containers/MessageBox/styles.ts b/app/containers/MessageBox/styles.ts
index 387ffdce0..3ea66b6cb 100644
--- a/app/containers/MessageBox/styles.ts
+++ b/app/containers/MessageBox/styles.ts
@@ -157,5 +157,21 @@ export default StyleSheet.create({
 		fontSize: 12,
 		marginLeft: 4,
 		...sharedStyles.textRegular
-	}
+	},
+	searchedEmoji: {
+		backgroundColor: 'transparent',
+		color: '#ffffff'
+	},
+	emojiContainer: { justifyContent: 'center', marginHorizontal: 2 },
+	emojiListContainer: { height: 50, paddingHorizontal: 5, marginVertical: 5 },
+	emojiSearchbarContainer: {
+		flexDirection: 'row',
+		height: 50,
+		marginBottom: 10,
+		justifyContent: 'center',
+		alignItems: 'center'
+	},
+	openEmojiKeyboard: { marginHorizontal: 10, justifyContent: 'center' },
+	emojiSearchbar: { padding: 10, borderRadius: 5 },
+	textInputContainer: { justifyContent: 'center', marginBottom: 0, marginRight: 15 }
 });