MM-66937 Fix broken IME handling in Find Channels modal (#35264) (#35798)

* MM-66937 Add E2E tests for bug

* MM-66937 Remove delayInputUpdate on that input to fix the bug

* Remove delayInputUpdate prop from QuickInput and SuggestionBox

* Run prettier

* Inline updateInputFromProps and remove eslint-disable that's no longer needed

* Fix snapshots

e2e-tests/playwright/specs/functional/channels/search/find_channels_korean.spec.ts

@@ -0,0 +1,63 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {expect, koreanTestPhrase, test, typeKoreanWithIme} from '@mattermost/playwright-lib';
+
+test('Find Channels modal handles Korean IME input correctly', async ({pw, browserName}) => {
+    test.skip(browserName !== 'chromium', 'The API used to test this is only available in Chrome');
+
+    const {adminClient, user, team} = await pw.initSetup();
+
+    // # Create a channel named after the test phrase
+    const fullMatchChannel = pw.random.channel({
+        teamId: team.id,
+        name: 'full-match-channel',
+        displayName: koreanTestPhrase,
+    });
+    await adminClient.createChannel(fullMatchChannel);
+
+    // # And create a channel matching part of the test phrase
+    const partialMatchChannel = pw.random.channel({
+        teamId: team.id,
+        name: 'partial-match-channel',
+        displayName: koreanTestPhrase.substring(0, 10),
+    });
+    await adminClient.createChannel(partialMatchChannel);
+
+    // # Log in and go to Channels
+    const {channelsPage, page} = await pw.testBrowser.login(user);
+
+    await channelsPage.goto();
+    await channelsPage.toBeVisible();
+
+    // # Open the channel switcher
+    await channelsPage.sidebarLeft.findChannelButton.click();
+    await channelsPage.findChannelsModal.toBeVisible();
+
+    // # Focus the input
+    const input = channelsPage.findChannelsModal.input;
+    await input.focus();
+
+    const firstHalf = koreanTestPhrase.substring(0, 5);
+    const secondHalf = koreanTestPhrase.substring(5);
+
+    // # Type the first half of the test phrase
+    await typeKoreanWithIme(page, firstHalf);
+
+    // * Verify that characters are correctly composed and weren't doubled up
+    await expect(input).toHaveValue(firstHalf);
+
+    // * Verify that both channels are visible
+    await expect(page.getByRole('option', {name: fullMatchChannel.display_name, exact: true})).toBeVisible();
+    await expect(page.getByRole('option', {name: partialMatchChannel.display_name, exact: true})).toBeVisible();
+
+    // # Type the second half of the test phrase
+    await typeKoreanWithIme(page, secondHalf);
+
+    // * Verify that characters are correctly composed and weren't doubled up
+    await expect(input).toHaveValue(koreanTestPhrase);
+
+    // * Verify that the first channel is still visible but that the second is not
+    await expect(page.getByRole('option', {name: fullMatchChannel.display_name, exact: true})).toBeVisible();
+    await expect(page.getByRole('option', {name: partialMatchChannel.display_name, exact: true})).not.toBeAttached();
+});

e2e-tests/playwright/specs/functional/channels/search/search_box_korean.spec.ts

@@ -0,0 +1,42 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {expect, koreanTestPhrase, test, typeKoreanWithIme} from '@mattermost/playwright-lib';
+
+test('Search box handles Korean IME correctly', async ({pw, browserName}) => {
+    test.skip(browserName !== 'chromium', 'The API used to test this is only available in Chrome');
+
+    const {userClient, user, team} = await pw.initSetup();
+
+    // # Create a channel named after the test phrase
+    const testChannel = pw.random.channel({
+        teamId: team.id,
+        name: 'korean-test-channel',
+        displayName: koreanTestPhrase,
+    });
+    await userClient.createChannel(testChannel);
+
+    // # Log in a user in new browser context
+    const {channelsPage, page} = await pw.testBrowser.login(user);
+
+    // # Visit a default channel page
+    await channelsPage.goto();
+    await channelsPage.toBeVisible();
+
+    // # Open the search UI
+    await channelsPage.globalHeader.openSearch();
+
+    const {searchInput} = channelsPage.searchBox;
+    await searchInput.focus();
+
+    // # Type into the textbox
+    const searchText = 'in:' + koreanTestPhrase.substring(0, 3);
+    await typeKoreanWithIme(page, searchText);
+
+    // * Verify that the text was typed correctly into the search box
+    await expect(searchInput).toHaveValue(searchText);
+
+    // * Verify that the channel is suggested
+    await expect(channelsPage.searchBox.selectedSuggestion).toBeVisible();
+    await expect(channelsPage.searchBox.selectedSuggestion).toHaveText(testChannel.display_name);
+});