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

fix(MultipleSelector): fix inconsistency between targetValue and inputValue

pull/8139/head
evan-lc 2025-04-22 22:56:51 +08:00
parent aa211fd789
commit 303797d42e
1 changed files with 6 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
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';
@ -93,14 +93,10 @@ const SelectSelector = defineComponent<SelectorProps>({
() => () =>
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;
}, },
@ -207,14 +203,6 @@ const SelectSelector = defineComponent<SelectorProps>({
return defaultRenderSelector(content, content, false); return defaultRenderSelector(content, content, false);
} }
const handleInput = (e: Event) => {
const composing = (e.target as any).composing;
targetValue.value = (e.target as any).value;
if (!composing) {
props.onInputChange(e);
}
};
return () => { return () => {
const { const {
id, id,
@ -229,6 +217,7 @@ const SelectSelector = defineComponent<SelectorProps>({
activeDescendantId, activeDescendantId,
tabindex, tabindex,
compositionStatus, compositionStatus,
onInputChange,
onInputPaste, onInputPaste,
onInputKeyDown, onInputKeyDown,
onInputMouseDown, onInputMouseDown,
@ -253,10 +242,10 @@ 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={onInputChange}
onPaste={onInputPaste} onPaste={onInputPaste}
onCompositionstart={onInputCompositionStart} onCompositionstart={onInputCompositionStart}
onCompositionend={onInputCompositionEnd} onCompositionend={onInputCompositionEnd}
@ -268,7 +257,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>
); );