From c67e5089c10189589721792ad00a4f968211f68f Mon Sep 17 00:00:00 2001
From: Alexandre Sollier <github@kuruyia.net>
Date: Thu, 5 Dec 2024 19:16:56 +0100
Subject: [PATCH] [MM-61946] Don't change the emoji picker search input text
 case (#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 <github@kuruyia.net>
---
 .../emoji_picker/components/emoji_picker_search.tsx |  2 +-
 .../src/components/emoji_picker/utils/index.test.ts | 13 +++++++++++++
 .../src/components/emoji_picker/utils/index.ts      |  2 +-
 3 files changed, 15 insertions(+), 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
index 1d52a40049..1d53e34c2a 100644
--- 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
index cdc186217d..f3fa167f6c 100644
--- 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
index 8a091d0a68..d47fab6376 100644
--- 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;
             }
         }