From 993901619fea7b49bd60b433dc52f9695e9c0d1b Mon Sep 17 00:00:00 2001
From: Dominik Danielewicz <ddanielewicz.dev@gmail.com>
Date: Mon, 25 Mar 2024 13:23:26 +0100
Subject: [PATCH] feat: optional search clear icon (#173)

---
 src/components/SearchBar.tsx    | 11 +++++++----
 src/contexts/KeyboardContext.ts |  2 ++
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
index bdde442..4a62562 100644
--- a/src/components/SearchBar.tsx
+++ b/src/components/SearchBar.tsx
@@ -11,6 +11,7 @@ export const SearchBar = ({ scrollEmojiCategoryListToIndex }: SearchBarProps) =>
   const {
     searchPhrase,
     setSearchPhrase,
+    hideSearchBarClearIcon,
     translation,
     setActiveCategoryIndex,
     renderList,
@@ -23,11 +24,11 @@ export const SearchBar = ({ scrollEmojiCategoryListToIndex }: SearchBarProps) =>
   } = React.useContext(KeyboardContext)
   const inputRef = React.useRef<TextInput>(null)
 
-  const handleSearch = async (text: string) => {
+  const handleSearch = (text: string) => {
     setSearchPhrase(text)
 
     if (text === '') {
-      await setActiveCategoryIndex(0)
+      setActiveCategoryIndex(0)
       scrollEmojiCategoryListToIndex(0)
       setShouldAnimateScroll(enableCategoryChangeAnimation)
 
@@ -45,8 +46,10 @@ export const SearchBar = ({ scrollEmojiCategoryListToIndex }: SearchBarProps) =>
   const clearPhrase = () => {
     setSearchPhrase('')
     clearEmojiTonesData()
-    inputRef.current?.blur()
     setActiveCategoryIndex(0)
+    setTimeout(() => {
+      inputRef.current?.blur()
+    }, 0)
     scrollEmojiCategoryListToIndex(0)
   }
 
@@ -67,7 +70,7 @@ export const SearchBar = ({ scrollEmojiCategoryListToIndex }: SearchBarProps) =>
         onTouchEndCapture={clearEmojiTonesData}
         placeholderTextColor={theme.search.placeholder}
       />
-      {!!searchPhrase && (
+      {!hideSearchBarClearIcon && !!searchPhrase && (
         <TouchableOpacity onPress={clearPhrase} style={styles.button}>
           <Icon
             iconName={'Close'}
diff --git a/src/contexts/KeyboardContext.ts b/src/contexts/KeyboardContext.ts
index 3359c0b..e6bdb9e 100644
--- a/src/contexts/KeyboardContext.ts
+++ b/src/contexts/KeyboardContext.ts
@@ -82,6 +82,7 @@ export type KeyboardProps = {
   enableRecentlyUsed?: boolean
   categoryPosition?: CategoryPosition
   enableSearchBar?: boolean
+  hideSearchBarClearIcon?: boolean
   customButtons?: React.ReactNode
   categoryOrder?: CategoryTypes[]
   onRequestClose?: () => void
@@ -176,6 +177,7 @@ export const defaultKeyboardContext: Required<KeyboardProps> & {
   enableRecentlyUsed: false,
   categoryPosition: 'floating',
   enableSearchBar: false,
+  hideSearchBarClearIcon: false,
   customButtons: null,
   categoryOrder: [...CATEGORIES],
   onRequestClose: () => {},