Japanese IME Enter key unintentionally submits form in Workflow App

[mitochon9]

Self Checks

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

Dify version

Version 0.7.3

Cloud or Self Hosted

Cloud

Steps to reproduce

1. Open the Udify.app Workflow App
2. Navigate to a step in the workflow that requires text input
3. Focus on an input field within the Workflow App
4. Start typing Japanese text using IME
5. Press Enter to confirm an IME conversion
6. Observe that the form is submitted and the workflow moves to the next step immediately after the IME conversion is confirmed

✔️ Expected Behavior

In the Workflow App, when using Japanese IME input, pressing the Enter key should only confirm the IME conversion without submitting the form or advancing to the next step. Workflow progression should only occur when explicitly triggered by a separate action (e.g., clicking a "Next" or "Submit" button).

❌ Actual Behavior

In the Workflow App, pressing the Enter key to confirm Japanese IME conversion immediately submits the current step's form and advances to the next step in the workflow. This interrupts the user's input process, potentially causing loss of unfinished input data and unintended workflow progression.

[dosubot[bot]]

Hey @mitochon9! 👋 I'm Dosu, a bot here to help you with bugs, questions, or becoming a contributor. I'll assist you while you wait for a human maintainer.

The issue you're experiencing with the Japanese IME Enter key unintentionally submitting the form in the Workflow App is due to the lack of specific handling for the Enter key in the current implementation. The form submission event is managed by an event listener for the 'keydown' event, but there is no specific handling for the Enter key ^[1].

To address this, you can modify the event listener to differentiate between IME input confirmation and form submission. Here's a potential solution:

1. Add a flag to detect IME input mode:

   const [isIME, setIsIME] = useState(false);
   
   useEventListener('compositionstart', () => {
     setIsIME(true);
   });
   
   useEventListener('compositionend', () => {
     setIsIME(false);
   });
   

2. Modify the keydown event listener to check for the IME flag:

   useEventListener('keydown', (e) => {
     if (isIME) return; // Skip handling if IME is active
   
     if ((e.key === 'd' || e.key === 'D') && (e.ctrlKey || e.metaKey))
       e.preventDefault();
     if ((e.key === 'z' || e.key === 'Z') && (e.ctrlKey || e.metaKey))
       e.preventDefault();
     if ((e.key === 'y' || e.key === 'Y') && (e.ctrlKey || e.metaKey))
       e.preventDefault();
     if ((e.key === 's' || e.key === 'S') && (e.ctrlKey || e.metaKey))
       e.preventDefault();
   });
   

This approach ensures that the Enter key only confirms the IME conversion without submitting the form or advancing to the next step in the workflow.

To continue talking to Dosu, mention @dosu.

[MH4GF]

@mitochon9 Please describe which specific tools and blocks you used. It would be even better if you could attach the DDL of the workflow.

[mitochon9]

@MH4GF Thank you for your quick response. I'd like to provide more accurate and specific information about the issue:

Workflow URL: https://udify.app/workflow/94SJUBdjddlkV9LP

Specific Tools and Blocks Used: The issue occurs in short text input fields such as "audience" and "tone" in the workflow. It's important to note that the "keyword" field is not affected by this issue.

Steps to Reproduce:

1. Open the workflow at the provided URL
2. Navigate to a short text input field (e.g., "audience", "tone")
3. Focus on the input field
4. Start typing Japanese text using IME (Input Method Editor)
5. Press Enter to confirm the IME conversion
6. Observe that the form is submitted immediately after the IME conversion is confirmed, instead of just confirming the text input

Expected Behavior: Pressing Enter should only confirm the Japanese text input in the short text field without submitting the form or advancing to the next step in the workflow.

Actual Behavior: Pressing Enter to confirm Japanese IME conversion in short text fields immediately submits the form and advances to the next step in the workflow. This interrupts the user's input process, potentially causing loss of unfinished input data and unintended workflow progression.

Additional Information:

• This behavior is consistently observed across different browsers (e.g., Chrome, Firefox, Safari) and operating systems.
• The issue significantly impacts the user experience for Japanese-speaking users interacting with the workflow, especially when filling out multiple short text fields.
• The problem does not occur when typing in languages that don't require IME (e.g., English).
• This issue appears to be specific to certain short text input fields and does not affect larger text areas or the "keyword" field in the workflow.

Would it be helpful if I provided a screen recording demonstrating the problem? I'm happy to provide any additional details that might help in resolving this issue.

[kurokobo]

In my environment, pressing the Enter key to confirm the IME conversion didn’t trigger Execute action. However, if I press Enter again after conversion, it definitely triggers Execute (I’m talking about the last input of the Enter key in the animation).

In your environment, does pressing Enter even once to confirm the conversion trigger Execute? What OS, IME, and browser are you using?

My environment:

• Windows 11
• Microsoft IME
• Chrome (latest)

Anyway, it seems like the only field where pressing Enter leads to an Execute action is the shorttext field, which can definitely lead unintended execution. It might be a design choice, but maybe we could change it so that ignoring Enter key on the any fields for the workflow.

Maybe we've seen similar problems with Google Meet, Teams, etc.

[mitochon9]

@kurokobo Thank you for your quick response and thorough investigation. I apologize for not providing my environment details earlier. Based on your feedback, I've conducted additional tests. Here's what I found:

My Environment:

• OS: macOS 14.4.1
• Browsers tested:
  • Chrome Version: 128.0.6613.120 (Official Build) (arm64)
  • Safari Version: 17.4.1 (19618.1.15.11.14)
  • Firefox Version: 130.0
• IMEs tested: Google Japanese Input, Mac native Japanese input

Test Results:

1. Chrome:

   • Google Japanese Input & Mac native Japanese input: Enter key to confirm conversion triggers submission

2. Safari:

   • Google Japanese Input & Mac native Japanese input: Enter key to confirm conversion triggers submission

3. Firefox:

   • Google Japanese Input & Mac native Japanese input: Enter key to confirm conversion does NOT trigger submission

In Chrome and Safari, pressing Enter once to confirm the IME conversion immediately triggers the Execute action. Firefox behaves differently, not triggering the Execute action on IME conversion.

I've prepared screen recordings demonstrating these behaviors across all three browsers and both IME systems. Would these be helpful for you to see?

Your suggestion to ignore the Enter key on all fields for the workflow seems interesting. I'm curious to hear more about your thoughts on this approach and how it might be implemented.

Is there any additional information I can provide or any other tests you'd like me to run? I'm here to help in any way I can to assist in resolving this issue.

https://github.com/user-attachments/assets/9077e446-6269-4c9e-b59d-835888c9ebd1

https://github.com/user-attachments/assets/4bd16c96-8337-47c5-bd2a-3bba7a585128

[MH4GF]

@mitochon9 @kurokobo Thanks for additional information! I was able to reproduce this in my environment. I'll try to open PR!