github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix[Select]: paste input value still display bug

pull/7965/head
yugasun 2024-12-04 09:49:09 +08:00
parent 4a37016f4e
commit fd8f60fd4e
1 changed files with 13 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
components/vc-select/Selector/MultipleSelector.tsx
View File

@ -2,7 +2,7 @@ import TransBtn from '../TransBtn';
import type { InnerSelectorProps } from './interface'; import type { InnerSelectorProps } from './interface';
import Input from './Input'; import Input from './Input';
import type { Ref, PropType } from 'vue'; import type { Ref, PropType } from 'vue';
import { ref, watchEffect, computed, defineComponent, onMounted, shallowRef, watch } from 'vue'; import { computed, defineComponent, onMounted, shallowRef, watch } from 'vue';
import classNames from '../../_util/classNames'; import classNames from '../../_util/classNames';
import pickAttrs from '../../_util/pickAttrs'; import pickAttrs from '../../_util/pickAttrs';
import PropTypes from '../../_util/vue-types'; import PropTypes from '../../_util/vue-types';
@ -86,21 +86,22 @@ const SelectSelector = defineComponent<SelectorProps>({
const selectionPrefixCls = computed(() => `${props.prefixCls}-selection`); const selectionPrefixCls = computed(() => `${props.prefixCls}-selection`);
// ===================== Search ====================== // ===================== Search ======================
const inputValue = computed(() => const inputValue = computed({
props.open || props.mode === 'tags' ? props.searchValue : '', get() {
); return props.open || props.mode === 'tags' ? props.searchValue : '';
},
set() {
// noop
},
});
const inputEditable: Ref<boolean> = computed( const inputEditable: Ref<boolean> = computed(
() => () =>
props.mode === 'tags' || ((props.showSearch && (props.open || focused.value)) as boolean), props.mode === 'tags' || ((props.showSearch && (props.open || focused.value)) as boolean),
); );
const targetValue = ref('');
watchEffect(() => {
targetValue.value = inputValue.value;
});
// We measure width and set to the input immediately // We measure width and set to the input immediately
onMounted(() => { onMounted(() => {
watch( watch(
targetValue, inputValue,
() => { () => {
inputWidth.value = measureRef.value.scrollWidth; inputWidth.value = measureRef.value.scrollWidth;
}, },
@ -209,7 +210,7 @@ const SelectSelector = defineComponent<SelectorProps>({
const handleInput = (e: Event) => { const handleInput = (e: Event) => {
const composing = (e.target as any).composing; const composing = (e.target as any).composing;
targetValue.value = (e.target as any).value; inputValue.value = (e.target as any).value;
if (!composing) { if (!composing) {
props.onInputChange(e); props.onInputChange(e);
} }
@ -253,7 +254,7 @@ const SelectSelector = defineComponent<SelectorProps>({
autocomplete={autocomplete} autocomplete={autocomplete}
editable={inputEditable.value} editable={inputEditable.value}
activeDescendantId={activeDescendantId} activeDescendantId={activeDescendantId}
value={targetValue.value} value={inputValue.value}
onKeydown={onInputKeyDown} onKeydown={onInputKeyDown}
onMousedown={onInputMouseDown} onMousedown={onInputMouseDown}
onChange={handleInput} onChange={handleInput}
@ -268,7 +269,7 @@ const SelectSelector = defineComponent<SelectorProps>({
{/* Measure Node */} {/* Measure Node */}
<span ref={measureRef} class={`${selectionPrefixCls.value}-search-mirror`} aria-hidden> <span ref={measureRef} class={`${selectionPrefixCls.value}-search-mirror`} aria-hidden>
{targetValue.value}&nbsp; {inputValue.value}&nbsp;
</span> </span>
</div> </div>
); );