Select: fix keydown event when composition (#21336)

pull/21019/head
bchen1029 2021-10-12 11:28:51 +08:00 committed by GitHub
parent 6ae261d840
commit 5e037ceaa6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 5 deletions

View File

@ -337,15 +337,18 @@
this.focused = true; this.focused = true;
this.$emit('focus', event); this.$emit('focus', event);
}, },
handleCompositionStart() { handleCompositionStart(event) {
this.$emit('compositionstart', event);
this.isComposing = true; this.isComposing = true;
}, },
handleCompositionUpdate(event) { handleCompositionUpdate(event) {
this.$emit('compositionupdate', event);
const text = event.target.value; const text = event.target.value;
const lastCharacter = text[text.length - 1] || ''; const lastCharacter = text[text.length - 1] || '';
this.isComposing = !isKorean(lastCharacter); this.isComposing = !isKorean(lastCharacter);
}, },
handleCompositionEnd(event) { handleCompositionEnd(event) {
this.$emit('compositionend', event);
if (this.isComposing) { if (this.isComposing) {
this.isComposing = false; this.isComposing = false;
this.handleInput(event); this.handleInput(event);

View File

@ -52,8 +52,8 @@
@blur="softFocus = false" @blur="softFocus = false"
@keyup="managePlaceholder" @keyup="managePlaceholder"
@keydown="resetInputState" @keydown="resetInputState"
@keydown.down.prevent="navigateOptions('next')" @keydown.down.prevent="handleNavigate('next')"
@keydown.up.prevent="navigateOptions('prev')" @keydown.up.prevent="handleNavigate('prev')"
@keydown.enter.prevent="selectOption" @keydown.enter.prevent="selectOption"
@keydown.esc.stop.prevent="visible = false" @keydown.esc.stop.prevent="visible = false"
@keydown.delete="deletePrevTag" @keydown.delete="deletePrevTag"
@ -84,11 +84,14 @@
@focus="handleFocus" @focus="handleFocus"
@blur="handleBlur" @blur="handleBlur"
@input="debouncedOnInputChange" @input="debouncedOnInputChange"
@keydown.native.down.stop.prevent="navigateOptions('next')" @keydown.native.down.stop.prevent="handleNavigate('next')"
@keydown.native.up.stop.prevent="navigateOptions('prev')" @keydown.native.up.stop.prevent="handleNavigate('prev')"
@keydown.native.enter.prevent="selectOption" @keydown.native.enter.prevent="selectOption"
@keydown.native.esc.stop.prevent="visible = false" @keydown.native.esc.stop.prevent="visible = false"
@keydown.native.tab="visible = false" @keydown.native.tab="visible = false"
@compositionstart="handleComposition"
@compositionupdate="handleComposition"
@compositionend="handleComposition"
@mouseenter.native="inputHovering = true" @mouseenter.native="inputHovering = true"
@mouseleave.native="inputHovering = false"> @mouseleave.native="inputHovering = false">
<template slot="prefix" v-if="$slots.prefix"> <template slot="prefix" v-if="$slots.prefix">
@ -440,6 +443,11 @@
}, },
methods: { methods: {
handleNavigate(direction) {
if (this.isOnComposition) return;
this.navigateOptions(direction);
},
handleComposition(event) { handleComposition(event) {
const text = event.target.value; const text = event.target.value;
if (event.type === 'compositionend') { if (event.type === 'compositionend') {