Unexpectedly fire the handleEnterKeyPress in NewChannelModal with Japanese IME input mode

[kaakaa]

Summary

In NewChannelModal, while typing channel name with Japanese character, unexpectedly fire "Create channel".

2023-07-07.23.19.40.mov

In the above movie, I pressed Enter with intend to determine the input, but creating channel is fired. If I press Enter twice, the behavior in the above movie is correct (the first is to determine, and the second is to create a channel).

Steps to reproduce

1. Open NewChannelModal
2. Type some alphanumeric in "Channel name" (to avoid the following problem)
   • if "Channel name" is filled by only Japanese character, channel url is automatically filled with invalid url (I don't know why this happens, but this behavior is out of scope for this issue)
   • 
3. Switch input mode to Japanese IME
4. Type some word (e.g.: channel name = "aaaあいう")
5. Type Enter (to determine the input)

Expected behavior

Determined the input, but don't fire "Create channel"

Observed behavior (that appears unintentional)

"Create channel" is done unexpectedly.

Possible fixes

In channel purpose area, avoid firing the handleEnterKeyPress, but does not in channel name are.
https://github.com/mattermost/mattermost/blob/master/webapp/channels/src/components/new_channel_modal/new_channel_modal.tsx#L273

Similar issue is #20838

[amyblais]

Hi @kaakaa What Mattermost server version are you on? Or did you see this on master?

[kaakaa]

Ah, sorry. I'm using v8.0.0-rc1.

[amyblais]

Thanks, opened https://mattermost.atlassian.net/browse/MM-53521.

[johndavidlugtu]

Hi @kaakaa , thanks for opening this Github issue.

In the above movie, I pressed Enter with intend to determine the input, but creating channel is fired. If I press Enter twice, the behavior in the above movie is correct (the first is to determine, and the second is to create a channel).

Pressing Enter while in the Channel Name field is designed to create a channel.

To determine / validate whether the set channel name is valid, one should switch focus away from the field by using the Tab key or by mousing over and clicking away from the Channel Name field.

Hope this clarifies things!

[kaakaa]

Thanks @johndavidlugtu .

Pressing Enter while in the Channel Name field is designed to create a channel.

This design would make most Japanese (and maybe CJK) users confusing, because Japanese users press the Enter key not to confirm the content of a dialog, but to confirm the word they are typing. The problem is due to the peculiarities of Japanese input method, but I do not think many Japanese users will tolerate this behavior. (I am not familiar with other languages, but I think at least Chinese users would feel the same)

To determine / validate whether the set channel name is valid, one should switch focus away from the field by using the Tab key or by mousing over and clicking away from the Channel Name field.

Switching focus away from the field is one of the workarounds, but It continues to be a major problem that just pressing Enter key confirms the contents of the dialog. Tab key, like the Enter key, is a special key in Japanese input situations, so it is difficult to workaround.

Japanese input method - Wikipedia
Kana to kanji conversion section in the above page may be helpful in explaining the Japanese input method. I think Japanese people press the Enter key more than people imagine.

[johndavidlugtu]

@kaakaa I see -- I appreciate you sharing some additional context

[SpaceNet]

I have same problem.
In Japanese language, we need to press Enter key while typing.
On this context, it is not good to do automatic processing by pressing Enter key.

---

Maybe, some other languages, especially not using the alphabet, have same problem.

[kaakaa]

This issue seems to be fixed in v8.1.0. I expect that the fix was introduced by #23839 that address the issue related to Enter key of Korean's IME. #23839 added some changes to GenericModal, and it might have good effect to NewChannelModal because GenericModal is also used for NewChannelModal.

I'll close this issue, and thank you for your continuous effort @johndavidlugtu.