langgenius/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-07-21 20:15:31 -04:00
Code Issues 775 Packages Projects Releases 10 Wiki Activity

The SearchInput component currently triggers the onChange event during IME (Input Method Editor) composition #6442

New Issue
Closed
opened 2026-02-21 18:15:46 -05:00 by yindo · 1 comment
yindo commented 2026-02-21 18:15:46 -05:00
Owner
Copy Link
Copy Source

Originally created by @Fog3211 on GitHub (Oct 30, 2024).

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.10.2

Cloud or Self Hosted

Self Hosted (Docker)

Steps to reproduce

Issue Description

The SearchInput component currently triggers the onChange event during IME (Input Method Editor) composition, which causes premature search updates when typing in languages that use IME (like Chinese, Japanese, Korean).

Steps to reproduce

  • Go to https://cloud.dify.ai/apps
  • Focus Input component, Then type words (using Chinese, Japanese, Korean)
  • It will Trigger searching when inputing

https://github.com/user-attachments/assets/e2c12c95-e8e0-4a10-b204-9fc46a4a98d9

✔️ Expected Behavior

  • The onChange event should only be triggered after the IME composition is complete
  • During IME composition (while typing pinyin/kana/etc), no onChange events should be fired
  • The search should update only after the user has confirmed their IME input

❌ Actual Behavior

  • The onChange event fires for every keystroke during IME composition
  • This causes the search to update while the user is still typing pinyin/kana
  • Results in poor user experience for IME users
Originally created by @Fog3211 on GitHub (Oct 30, 2024). ### Self Checks - [X] This is only for bug report, if you would like to ask a question, please head to [Discussions](https://github.com/langgenius/dify/discussions/categories/general). - [X] I have searched for existing issues [search for existing issues](https://github.com/langgenius/dify/issues), including closed ones. - [X] I confirm that I am using English to submit this report (我已阅读并同意 [Language Policy](https://github.com/langgenius/dify/issues/1542)). - [X] [FOR CHINESE USERS] 请务必使用英文提交 Issue，否则会被关闭。谢谢！:） - [X] Please do not modify this template :) and fill in all the required fields. ### Dify version 0.10.2 ### Cloud or Self Hosted Self Hosted (Docker) ### Steps to reproduce ## Issue Description The SearchInput component currently triggers the onChange event during IME (Input Method Editor) composition, which causes premature search updates when typing in languages that use IME (like Chinese, Japanese, Korean). ## Steps to reproduce - Go to [https://cloud.dify.ai/apps](https://cloud.dify.ai/apps) - Focus Input component, Then type words (using Chinese, Japanese, Korean) - It will Trigger searching when inputing https://github.com/user-attachments/assets/e2c12c95-e8e0-4a10-b204-9fc46a4a98d9 ### ✔️ Expected Behavior - The onChange event should only be triggered after the IME composition is complete - During IME composition (while typing pinyin/kana/etc), no onChange events should be fired - The search should update only after the user has confirmed their IME input ### ❌ Actual Behavior - The onChange event fires for every keystroke during IME composition - This causes the search to update while the user is still typing pinyin/kana - Results in poor user experience for IME users
yindo added the 🐞 bug label 2026-02-21 18:15:46 -05:00
yindo closed this issue 2026-02-21 18:15:46 -05:00
yindo commented 2026-02-21 18:15:46 -05:00
Author
Owner
Copy Link
Copy Source

@dosubot[bot] commented on GitHub (Oct 30, 2024):

Hello, @Fog3211! I'm here to help you with bug fixes, questions, and contributing. Let's work together to solve the issue you're facing.

To address the issue with the SearchInput component triggering the onChange event during IME composition, you can modify the component to handle IME events properly. This involves using the onCompositionStart, onCompositionUpdate, and onCompositionEnd events to manage the IME composition state. Here's a solution you can implement:

import { useCallback, useState } from 'react'
import type { ChangeEvent, CompositionEvent } from 'react'
import { useTranslation } from 'react-i18next'
import s from './index.module.css'
import cn from '@/utils/classnames'

type SearchInputProps = {
  value: string
  onChange: (v: string) => void
}

const SearchInput = ({
  value,
  onChange,
}: SearchInputProps) => {
  const { t } = useTranslation()
  const [isComposing, setIsComposing] = useState(false)

  const handleClear = useCallback(() => {
    onChange('')
  }, [onChange])

  const handleCompositionStart = useCallback((e: CompositionEvent<HTMLInputElement>) => {
    setIsComposing(true)
  }, [])

  const handleCompositionEnd = useCallback((e: CompositionEvent<HTMLInputElement>) => {
    setIsComposing(false)
    onChange(e.currentTarget.value)
  }, [onChange])

  const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
    if (!isComposing) {
      onChange(e.target.value)
    }
  }, [isComposing, onChange])

  return (
    <div className={cn(s['input-wrapper'], 'flex items-center px-2 h-7 rounded-md', `${value ? 'bg-white' : 'bg-gray-100'}`)}>
      <div className={cn(s['search-icon'], 'mr-[6px] w-4 h-4')} />
      <input
        className='grow text-[13px] bg-inherit border-0 outline-0 appearance-none'
        value={value}
        onChange={handleChange}
        onCompositionStart={handleCompositionStart}
        onCompositionEnd={handleCompositionEnd}
        placeholder={t('common.dataSource.notion.selector.searchPages') || ''}
      />
      {
        value && (
          <div
            className={cn(s['clear-icon'], 'ml-1 w-4 h-4 cursor-pointer')}
            onClick={handleClear}
          />
        )
      }
    </div>
  )
}

export default SearchInput

This modification ensures that the onChange event is only triggered after the IME composition is complete, preventing premature search updates for languages that use IME [1].

To continue talking to Dosu, mention @dosu.

@dosubot[bot] commented on GitHub (Oct 30, 2024): <!-- Greeting --> Hello, @Fog3211! I'm here to help you with bug fixes, questions, and contributing. Let's work together to solve the issue you're facing. <!-- Answer --> To address the issue with the `SearchInput` component triggering the `onChange` event during IME composition, you can modify the component to handle IME events properly. This involves using the `onCompositionStart`, `onCompositionUpdate`, and `onCompositionEnd` events to manage the IME composition state. Here's a solution you can implement: ```tsx import { useCallback, useState } from 'react' import type { ChangeEvent, CompositionEvent } from 'react' import { useTranslation } from 'react-i18next' import s from './index.module.css' import cn from '@/utils/classnames' type SearchInputProps = { value: string onChange: (v: string) => void } const SearchInput = ({ value, onChange, }: SearchInputProps) => { const { t } = useTranslation() const [isComposing, setIsComposing] = useState(false) const handleClear = useCallback(() => { onChange('') }, [onChange]) const handleCompositionStart = useCallback((e: CompositionEvent<HTMLInputElement>) => { setIsComposing(true) }, []) const handleCompositionEnd = useCallback((e: CompositionEvent<HTMLInputElement>) => { setIsComposing(false) onChange(e.currentTarget.value) }, [onChange]) const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => { if (!isComposing) { onChange(e.target.value) } }, [isComposing, onChange]) return ( <div className={cn(s['input-wrapper'], 'flex items-center px-2 h-7 rounded-md', `${value ? 'bg-white' : 'bg-gray-100'}`)}> <div className={cn(s['search-icon'], 'mr-[6px] w-4 h-4')} /> <input className='grow text-[13px] bg-inherit border-0 outline-0 appearance-none' value={value} onChange={handleChange} onCompositionStart={handleCompositionStart} onCompositionEnd={handleCompositionEnd} placeholder={t('common.dataSource.notion.selector.searchPages') || ''} /> { value && ( <div className={cn(s['clear-icon'], 'ml-1 w-4 h-4 cursor-pointer')} onClick={handleClear} /> ) } </div> ) } export default SearchInput ``` This modification ensures that the `onChange` event is only triggered after the IME composition is complete, preventing premature search updates for languages that use IME <sup>[[1]](https://github.com/langgenius/dify/blob/main/web/app/components/base/notion-page-selector/search-input/index.tsx)</sup>. <!-- Dosu Comment Footer --> *To continue talking to [Dosu](https://dosu.dev), mention @dosu.*
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
Knowledge Pipeline
Proposal
WIP
cloud
dependencies
feat:webapp
good first issue
outdated
performance
pull-request
Mirrored from GitHub Pull Request
 python:uv
refactor
size:L
stale
status: accepting prs
status: blocked
status: in discussion
stt & tts
vulnerablity
web
wont-fix
🌊 feat:workflow
🌚 invalid
🐞 bug
👻 feat:rag
💪 enhancement
📚 documentation
🔨 feat:tools
🙋‍♂️ question
🙏 help wanted
🤔 cant-reproduce
🤖 feat:agent
No Label 🐞 bug
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: langgenius/dify#6442
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?