[MM-61946] Don't change the emoji picker search input text case (matt…

…ermost#29397) This removes the search input text lowercasing from the `EmojiPickerSearch` component, where it is used as the text displayed to the user. Instead, filter lowercasing is done in the `getFilteredEmojis` function to make emoji search case-insensitive. Signed-off-by: Kuruyia <[email protected]>
devinbinnie · Dec 5, 2024 · c67e508 · c67e508
1 parent 491e46d
commit c67e508
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 2 deletions.
diff --git a/webapp/channels/src/components/emoji_picker/components/emoji_picker_search.tsx b/webapp/channels/src/components/emoji_picker/components/emoji_picker_search.tsx
@@ -31,7 +31,7 @@ const EmojiPickerSearch = forwardRef<HTMLInputElement, Props>(({value, cursorCat
         event.preventDefault();
 
         // remove trailing and leading colons
-        const value = event.target.value.toLowerCase().replace(/^:|:$/g, '');
+        const value = event.target.value.replace(/^:|:$/g, '');
         onChange(value);
 
         resetCursorPosition();

diff --git a/webapp/channels/src/components/emoji_picker/utils/index.test.ts b/webapp/channels/src/components/emoji_picker/utils/index.test.ts
@@ -233,6 +233,19 @@ describe('getFilteredEmojis', () => {
 
         expect(getFilteredEmojis(allEmojis as any, filter, recentEmojisString, userSkinTone)).toEqual(filteredResults);
     });
+
+    test('Should be case-insensitive', () => {
+        const allEmojis = {
+            smile: smileEmoji,
+            thumbsup: thumbsupEmoji,
+            thumbsdown: thumbsdownEmoji,
+        };
+        const filter = 'DoWn';
+        const recentEmojisString: string[] = [];
+        const userSkinTone = '';
+
+        expect(getFilteredEmojis(allEmojis as any, filter, recentEmojisString, userSkinTone)).toStrictEqual([thumbsdownEmoji]);
+    });
 });
 
 describe('calculateCategoryRowIndex', () => {

diff --git a/webapp/channels/src/components/emoji_picker/utils/index.ts b/webapp/channels/src/components/emoji_picker/utils/index.ts
@@ -63,7 +63,7 @@ export function getFilteredEmojis(allEmojis: Record<string, Emoji>, filter: stri
         const aliases = isSystemEmoji(emoji) ? emoji.short_names : [emoji.name];
 
         for (let i = 0; i < aliases.length; i++) {
-            if (aliases[i].toLowerCase().includes(filter)) {
+            if (aliases[i].toLowerCase().includes(filter.toLowerCase())) {
                 return true;
             }
         }