Vue - 일본어 입력의 경우, 오류 발생시 처리 (feat. antd-vue)

회사의 어드민을 Antd-vue를 이용해 개발 하고 있습니다.

그런데, 한글, 영어는 입력이 잘 되는데, 이상하게도 일본어의 경우는 오류가 발생합니다.

https://ko.vuejs.org/guide/essentials/forms#basic-usage

Vue.js

Vue docs에도 IME의 경우 따로 바인딩을 해야 한다고 가이드 하고 있습니다.

이런 경우, 아래 처럼 해결 하면 됩니다.

			// 기존
            <a-auto-complete
              v-model:value="searchValue"
              :options="options"
              :open="dropdownOpen"
              class="category-search-input"
              allow-clear
              @select="handleSelect"
              @input="handleInput"
              @clear="handleClear"
              @keyup.enter="handleEnter"
            />
            // 변경 
            <a-auto-complete
              :options="options"
              :open="dropdownOpen"
              class="category-search-input"
              allow-clear
              v-model:value="searchValue"
              @select="handleSelect"
              @change="handleChange"
              @clear="handleClear"
              @keyup.enter="handleEnter"
            />

처음에는 그냥, @input 함수를 통해서 빈값인지 체크 하는 로직을 넣었고, input value는 model 바인딩을 했었습니다.

그런데, 일본어가 계속 제대로 바인딩이 되지 않는 이슈가 있었습니다. 그래서 input 대신 change 함수를 사용 했고, 

  const handleChange = (
    value: SelectValue,
    option: DefaultOptionType | DefaultOptionType[],
  ) => {
    const valueAsString = value != null ? String(value) : ''

    if (isEmptyString(valueAsString)) {
      //...기타 코드
      searchValue.value = ''
    } else {
      searchValue.value = valueAsString
    }
  }

아래처럼 빈값이 아닌 경우, 바인딩 하는 모델에 값을 넣어주면 정상적으로 입력 처리가 되었습니다.

그런데, 문제는 change 함수를 쓰는 것이기에, 자동완성의 경우 클릭시 어떻게 동작하느냐?에 따른 스펙에 따라 handleChange 함수 내부에서 비즈니스 로직상 추가적으로 필요한 부분이 생길 수 있습니다.

다른, IME 입력처리를 좀 더 좋게 처리 하려면, composition 이벤트를 통해, 시작과 끝의 조합된 글자를 바인딩 하는 방법이 좋다고 합니다.