Fix regression in emoji picker order mangling after clearing filter (#10854)

* Add regression test for emoji picker order mangling after clearing filter

* Fix regression in emoji picker order mangling after clearing filter

* Iterate

* Update src/components/views/emojipicker/EmojiPicker.tsx

src/components/views/emojipicker/EmojiPicker.tsx

@@ -268,8 +268,11 @@ class EmojiPicker extends React.Component<IProps, IState> {
             } else {
                 emojis = cat.id === "recent" ? this.recentlyUsed : DATA_BY_CATEGORY[cat.id];
             }
+
+            if (lcFilter !== "") {
                 emojis = emojis.filter((emoji) => this.emojiMatchesFilter(emoji, lcFilter));
-            emojis = emojis.sort((a, b) => {
+                // Copy the array to not clobber the original unfiltered sorting
+                emojis = [...emojis].sort((a, b) => {
                     const indexA = a.shortcodes[0].indexOf(lcFilter);
                     const indexB = b.shortcodes[0].indexOf(lcFilter);
 
@@ -287,6 +290,8 @@ class EmojiPicker extends React.Component<IProps, IState> {
                     // Prioritize emojis starting with the filter
                     return indexA - indexB;
                 });
+            }
+
             this.memoizedDataByCategory[cat.id] = emojis;
             cat.enabled = emojis.length > 0;
             // The setState below doesn't re-render the header and we already have the refs for updateVisibility, so...

test/components/views/emojipicker/EmojiPicker-test.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, { createRef } from "react";
 import { render } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
@@ -24,6 +24,26 @@ import { stubClient } from "../../../test-utils";
 describe("EmojiPicker", function () {
     stubClient();
 
+    it("should not mangle default order after filtering", () => {
+        const ref = createRef<EmojiPicker>();
+        const { container } = render(
+            <EmojiPicker ref={ref} onChoose={(str: string) => false} onFinished={jest.fn()} />,
+        );
+
+        // Record the HTML before filtering
+        const beforeHtml = container.innerHTML;
+
+        // Apply a filter and assert that the HTML has changed
+        //@ts-ignore private access
+        ref.current!.onChangeFilter("test");
+        expect(beforeHtml).not.toEqual(container.innerHTML);
+
+        // Clear the filter and assert that the HTML matches what it was before filtering
+        //@ts-ignore private access
+        ref.current!.onChangeFilter("");
+        expect(beforeHtml).toEqual(container.innerHTML);
+    });
+
     it("sort emojis by shortcode and size", function () {
         const ep = new EmojiPicker({ onChoose: (str: string) => false, onFinished: jest.fn() });