fix(RunOnce): change to form submission instead of onKeyDown and onClick

[MH4GF]

Checklist:

Important

Please review the checklist below before submitting your pull request.

• Please open an issue before creating a PR or link to an existing issue
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I ran dev/reformat(backend) and cd web && npx lint-staged(frontend) to appease the lint gods

Description

• Fixes: Japanese IME Enter key unintentionally submits form in Workflow App #8092

Solves the problem of the IME being sent during composing. There are several solutions, but the use of form submit events was considered the most appropriate.

before	after
CleanShot.2024-09-15.at.13.09.12.mp4	CleanShot.2024-09-15.at.13.07.37.mp4

reproducable workflow DSL

app:
  description: ''
  icon: 🤖
  icon_background: '#FFEAD5'
  mode: workflow
  name: testtest
  use_icon_as_answer_icon: false
kind: app
version: 0.1.2
workflow:
  conversation_variables: []
  environment_variables: []
  features:
    file_upload:
      image:
        enabled: false
        number_limits: 3
        transfer_methods:
        - local_file
        - remote_url
    opening_statement: ''
    retriever_resource:
      enabled: true
    sensitive_word_avoidance:
      enabled: false
    speech_to_text:
      enabled: false
    suggested_questions: []
    suggested_questions_after_answer:
      enabled: false
    text_to_speech:
      enabled: false
      language: ''
      voice: ''
  graph:
    edges:
    - data:
        isInIteration: false
        sourceType: start
        targetType: end
      id: 1725801993255-source-1726369077052-target
      source: '1725801993255'
      sourceHandle: source
      target: '1726369077052'
      targetHandle: target
      type: custom
      zIndex: 0
    nodes:
    - data:
        desc: ''
        selected: true
        title: 開始
        type: start
        variables:
        - label: input
          max_length: 48
          options: []
          required: true
          type: text-input
          variable: input
        - label: paragraph
          max_length: 48
          options: []
          required: true
          type: paragraph
          variable: paragraph
        - label: select
          max_length: 48
          options:
          - option 1
          - option 2
          required: true
          type: select
          variable: select
        - label: number
          max_length: 48
          options: []
          required: true
          type: number
          variable: number
      height: 168
      id: '1725801993255'
      position:
        x: 80
        y: 282
      positionAbsolute:
        x: 80
        y: 282
      selected: true
      sourcePosition: right
      targetPosition: left
      type: custom
      width: 244
    - data:
        desc: ''
        outputs:
        - value_selector:
          - '1725801993255'
          - input
          variable: target
        selected: false
        title: 終了
        type: end
      height: 90
      id: '1726369077052'
      position:
        x: 384
        y: 282
      positionAbsolute:
        x: 384
        y: 282
      sourcePosition: right
      targetPosition: left
      type: custom
      width: 244
    viewport:
      x: 0
      y: 0
      zoom: 1

Another Solution

The first possible solution is to use KeyboardEvent.isComposing, but this does not work as expected in Safari.
ref: Please do not implement Enter key to Submit behaviors by directly hooking into the raw keypress event.
I initially considered implementing it: #8459

Current Solution

I have implemented form submission using the onSubmit event of the form element. (This behavior is commonly referred to as implicit submission.)
This approach maintains the existing functionality of submitting the form via the submit button or by pressing enter in an input element, while simplifying the code and avoiding issues in browsers like Safari.

Type of Change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update, included: Dify Document
• Improvement, including but not limited to code refactoring, performance optimization, and UI/UX improvement
• Dependency upgrade

Testing Instructions

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration

• Test A
• Test B