Mistaken Input Submission Due to IME Enter Key Handling and Shift+Enter Line Break Sequence.

[hyasssy]

Self Checks

• This is only for bug report, if you would like to ask a question, please head to Discussions.
• I have searched for existing issues search for existing issues, including closed ones.
• I confirm that I am using English to submit this report (我已阅读并同意 Language Policy).
• [FOR CHINESE USERS] 请务必使用英文提交 Issue，否则会被关闭。谢谢！:）
• Please do not modify this template :) and fill in all the required fields.

Dify version

0.9.1

Cloud or Self Hosted

Self Hosted (Docker)

Steps to reproduce

There are times when input is mistakenly sent by pressing enter after completing IME input. When inserting a line break with shift + enter, mistaken sending occurs if you:

1. press down shift and enter
2. release shift
3. release enter

✔️ Expected Behavior

Nothing happens.

❌ Actual Behavior

The texts post.
If steps 2 and 3 are reversed, there is no issue.

I'm a Japanese user. I'm guessing it often happens to many user using IME.

[dosubot]

Hello, @hyasssy! I'm here to help you with any bugs, questions, or contributions you have for Dify. Let's work together to solve the issue you're facing.

A similar issue was previously reported and closed: Japanese IME Enter key unintentionally submits form in Workflow App. The issue was resolved by changing the form submission method to avoid triggering on key events like onKeyDown and onClick ^[1].

Dify handles key events by preventing the Enter key from sending a message if the input method is in use. The handleSend function is triggered only when Enter is pressed without Shift, and the input method is not active ^[2].

To continue talking to Dosu, mention @dosu.

[hyasssy]

@dosu

Thanks.
I am glad that Dify is working on a problem that I often encounter in Japanese.
But, I've thought it over and the cause of this problem was not related to the IME.
When I want a line break with shift + enter and performing like

1. shift + enter
2. raise shift
3. raise enter
   then unexpected post occurs.

I often make a line break to organise the contents of the AI input prompt, but in that case, the above event often occurs.
I would love to fix this.

Debug browser: chrome, safari

[dosubot]

The issue you're experiencing seems to be related to the sequence of key releases when using Shift + Enter for line breaks. The current logic in Dify's chat-input.tsx component differentiates between Enter and Shift + Enter, but it might not handle the specific sequence of releasing Shift before Enter properly.

To address this, you might need to adjust the key event handling logic to ensure that releasing Shift before Enter doesn't trigger a message send. This could involve adding additional checks in the handleKeyUp and handleKeyDown functions to track the state of both keys more accurately.

Here's a potential approach:

1. Track the state of both Shift and Enter keys separately.
2. Ensure that a message is only sent if Enter is released without Shift being pressed.

This might require modifying the existing logic to better handle the sequence of key releases. If you need further guidance on implementing this, feel free to ask!

To continue talking to Dosu, mention @dosu.

[hyasssy]

I noticed that this happens not only with the Shift+Enter key, but also with all other combinations with the Enter key.
So many typos and lazy typing are causing this problem for me.
I'm guessing IME users may face this problem in particular.

[hyasssy]

I've read a bit of the code and it seems to me that the event on keyup is unnecessary.
Unfortunately, I don't know how to develop this environment and I'm not likely to be able to submit the pull request myself until I do.
It would be great if you could check.