Merge pull request #37439 from Pujan92/fix/36883

Fix: Emoji picker - Highlight is removed from emoji when scrolling up with up key
Expensify · Mar 5, 2024 · 245a4a5 · 245a4a5
2 parents 3df2616 + a15579c
commit 245a4a5
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/src/components/EmojiPicker/EmojiPickerMenu/BaseEmojiPickerMenu.js b/src/components/EmojiPicker/EmojiPickerMenu/BaseEmojiPickerMenu.js
@@ -143,6 +143,14 @@ function BaseEmojiPickerMenu({headerEmojis, scrollToHeader, isFiltered, listWrap
                     contentContainerStyle={styles.ph4}
                     extraData={extraData}
                     getItemType={getItemType}
+                    overrideProps={{
+                        // scrollPaddingTop set to consider sticky header while scrolling, https://github.com/Expensify/App/issues/36883
+                        style: {
+                            minHeight: 1,
+                            minWidth: 1,
+                            scrollPaddingTop: isFiltered ? 0 : CONST.EMOJI_PICKER_ITEM_HEIGHT,
+                        },
+                    }}
                 />
             </View>
             <EmojiSkinToneList />

diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.js b/src/components/EmojiPicker/EmojiPickerMenu/index.js
@@ -334,12 +334,7 @@ function EmojiPickerMenu({forwardedRef, onEmojiSelected, activeEmoji}) {
                 isFiltered={isListFiltered}
                 headerEmojis={headerEmojis}
                 scrollToHeader={scrollToHeader}
-                listWrapperStyle={[
-                    listStyle,
-                    // Set scrollPaddingTop to consider sticky headers while scrolling
-                    {scrollPaddingTop: isListFiltered ? 0 : CONST.EMOJI_PICKER_ITEM_HEIGHT},
-                    styles.flexShrink1,
-                ]}
+                listWrapperStyle={[listStyle, styles.flexShrink1]}
                 ref={emojiListRef}
                 data={filteredEmojis}
                 renderItem={renderItem}