[PR #8460] fix(RunOnce): change to form submission instead of onKeyDown and onClick #26057

Closed
opened 2026-02-21 20:34:15 -05:00 by yindo · 0 comments
Owner

Original Pull Request: https://github.com/langgenius/dify/pull/8460

State: closed
Merged: Yes


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

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
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: https://github.com/langgenius/dify/pull/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
**Original Pull Request:** https://github.com/langgenius/dify/pull/8460 **State:** closed **Merged:** Yes --- # Checklist: > [!IMPORTANT] > Please review the checklist below before submitting your pull request. - [x] Please open an issue before creating a PR or link to an existing issue - [x] I have performed a self-review of my own code - [x] I have commented my code, particularly in hard-to-understand areas - [x] I ran `dev/reformat`(backend) and `cd web && npx lint-staged`(frontend) to appease the lint gods # Description - Fixes: https://github.com/langgenius/dify/issues/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| | --- | --- | |<video src="https://github.com/user-attachments/assets/63b240f0-f233-4fc3-b28f-27e612dea826" />|<video src="https://github.com/user-attachments/assets/8fddaa59-78b0-468f-b17b-bdc92e43efee" />| <details><summary>reproducable workflow DSL</summary> <p> ```yaml 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 ``` </p> </details> ## 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.](https://dninomiya.github.io/form-guide/stop-enter-submit) I initially considered implementing it: https://github.com/langgenius/dify/pull/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](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#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 - [x] 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](https://github.com/langgenius/dify-docs) - [ ] 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
yindo added the pull-request label 2026-02-21 20:34:15 -05:00
yindo closed this issue 2026-02-21 20:34:23 -05:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: langgenius/dify#26057