element-plus/packages/components/select-v2/src/useInput.ts

A Component Library for Vue 3

import { ref } from 'vue'
import { isFunction } from '@vue/shared'
import { isKorean } from '@element-plus/utils/isDef'

export function useInput(handleInput: (event: InputEvent) => void) {
  const isComposing = ref(false)

  const handleCompositionStart = () => {
    isComposing.value = true
  }

  const handleCompositionUpdate = (event) => {
    const text = event.target.value
    const lastCharacter = text[text.length - 1] || ''
    isComposing.value = !isKorean(lastCharacter)
  }

  const handleCompositionEnd = (event) => {
    if (isComposing.value) {
      isComposing.value = false
      if (isFunction(handleInput)) {
        handleInput(event)
      }
    }
  }

  return {
    handleCompositionStart,
    handleCompositionUpdate,
    handleCompositionEnd,
  }
}