From feb4dc71844977c66db071e6ad2d138cc5eaf0fe Mon Sep 17 00:00:00 2001 From: carl-chen Date: Thu, 23 May 2024 18:06:09 +0800 Subject: [PATCH 1/3] fix[select]: fix placeholder error when inputting Chinese fix(selector): fix placeholder error when inputting Chinese perf: optimize types --- .../vc-select/Selector/SingleSelector.tsx | 10 ++++++++-- components/vc-select/Selector/index.tsx | 18 ++++++++++++------ 2 files changed, 20 insertions(+), 8 deletions(-) diff --git a/components/vc-select/Selector/SingleSelector.tsx b/components/vc-select/Selector/SingleSelector.tsx index c4eaa74643..c17dd07ee5 100644 --- a/components/vc-select/Selector/SingleSelector.tsx +++ b/components/vc-select/Selector/SingleSelector.tsx @@ -1,7 +1,7 @@ import pickAttrs from '../../_util/pickAttrs'; import Input from './Input'; import type { InnerSelectorProps } from './interface'; -import { Fragment, computed, defineComponent, shallowRef, watch } from 'vue'; +import { Fragment, Ref, computed, defineComponent, shallowRef, watch } from 'vue'; import PropTypes from '../../_util/vue-types'; import type { VueNode } from '../../_util/type'; import useInjectLegacySelectContext from '../../vc-tree-select/LegacyContext'; @@ -10,6 +10,9 @@ interface SelectorProps extends InnerSelectorProps { inputElement: VueNode; activeValue: string; optionLabelRender: Function; + + // placeholder + compositionStatus: Ref; } const props = { inputElement: PropTypes.any, @@ -20,6 +23,7 @@ const props = { searchValue: String, inputRef: PropTypes.any, placeholder: PropTypes.any, + compositionStatus: PropTypes.shape({ value: PropTypes.bool }).def({ value: false }), disabled: { type: Boolean, default: undefined }, mode: String, showSearch: { type: Boolean, default: undefined }, @@ -65,7 +69,9 @@ const SingleSelector = defineComponent({ // Not show text when closed expect combobox mode const hasTextInput = computed(() => - props.mode !== 'combobox' && !props.open && !props.showSearch ? false : !!inputValue.value, + props.mode !== 'combobox' && !props.open && !props.showSearch + ? false + : !!inputValue.value || props.compositionStatus.value, ); const title = computed(() => { diff --git a/components/vc-select/Selector/index.tsx b/components/vc-select/Selector/index.tsx index e06a010b49..0c2a9ddc7f 100644 --- a/components/vc-select/Selector/index.tsx +++ b/components/vc-select/Selector/index.tsx @@ -15,7 +15,7 @@ import type { CustomTagProps, DisplayValueType, Mode, RenderNode } from '../Base import { isValidateOpenKey } from '../utils/keyUtil'; import useLock from '../hooks/useLock'; import type { PropType } from 'vue'; -import { defineComponent } from 'vue'; +import { defineComponent, ref } from 'vue'; import createRef from '../../_util/createRef'; import PropTypes from '../../_util/vue-types'; import type { VueNode } from '../../_util/type'; @@ -124,7 +124,7 @@ const Selector = defineComponent({ } as any, setup(props, { expose }) { const inputRef = createRef(); - let compositionStatus = false; + let compositionStatus = ref(false); // ====================== Input ====================== const [getInputMouseDown, setInputMouseDown] = useLock(0); @@ -140,7 +140,12 @@ const Selector = defineComponent({ props.onInputKeyDown(event); } - if (which === KeyCode.ENTER && props.mode === 'tags' && !compositionStatus && !props.open) { + if ( + which === KeyCode.ENTER && + props.mode === 'tags' && + !compositionStatus.value && + !props.open + ) { // When menu isn't open, OptionList won't trigger a value change // So when enter is pressed, the tag's input value should be emitted here to let selector know props.onSearchSubmit((event.target as HTMLInputElement).value); @@ -163,17 +168,17 @@ const Selector = defineComponent({ let pastedText = null; const triggerOnSearch = (value: string) => { - if (props.onSearch(value, true, compositionStatus) !== false) { + if (props.onSearch(value, true, compositionStatus.value) !== false) { props.onToggleOpen(true); } }; const onInputCompositionStart = () => { - compositionStatus = true; + compositionStatus.value = true; }; const onInputCompositionEnd = (e: InputEvent) => { - compositionStatus = false; + compositionStatus.value = false; // Trigger search again to support `tokenSeparators` with typewriting if (props.mode !== 'combobox') { triggerOnSearch((e.target as HTMLInputElement).value); @@ -251,6 +256,7 @@ const Selector = defineComponent({ onInputMouseDown: onInternalInputMouseDown, onInputChange, onInputPaste, + compositionStatus, onInputCompositionStart, onInputCompositionEnd, }; From ce8aa2eafb67b190b0a7204e3697222c3cd5a0b0 Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Tue, 4 Jun 2024 18:58:31 +0800 Subject: [PATCH 2/3] Update SingleSelector.tsx --- components/vc-select/Selector/SingleSelector.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/vc-select/Selector/SingleSelector.tsx b/components/vc-select/Selector/SingleSelector.tsx index c17dd07ee5..50aa6ea42c 100644 --- a/components/vc-select/Selector/SingleSelector.tsx +++ b/components/vc-select/Selector/SingleSelector.tsx @@ -12,7 +12,7 @@ interface SelectorProps extends InnerSelectorProps { optionLabelRender: Function; // placeholder - compositionStatus: Ref; + compositionStatus: boolean; } const props = { inputElement: PropTypes.any, @@ -23,7 +23,7 @@ const props = { searchValue: String, inputRef: PropTypes.any, placeholder: PropTypes.any, - compositionStatus: PropTypes.shape({ value: PropTypes.bool }).def({ value: false }), + compositionStatus: { type: Boolean, default: undefined }, disabled: { type: Boolean, default: undefined }, mode: String, showSearch: { type: Boolean, default: undefined }, @@ -71,7 +71,7 @@ const SingleSelector = defineComponent({ const hasTextInput = computed(() => props.mode !== 'combobox' && !props.open && !props.showSearch ? false - : !!inputValue.value || props.compositionStatus.value, + : !!inputValue.value || props.compositionStatus, ); const title = computed(() => { From 16079eb8177e11c579a3d06d8e0b30c75c16b641 Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Tue, 4 Jun 2024 18:59:11 +0800 Subject: [PATCH 3/3] Update index.tsx --- components/vc-select/Selector/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/vc-select/Selector/index.tsx b/components/vc-select/Selector/index.tsx index 0c2a9ddc7f..4ee018beae 100644 --- a/components/vc-select/Selector/index.tsx +++ b/components/vc-select/Selector/index.tsx @@ -256,7 +256,7 @@ const Selector = defineComponent({ onInputMouseDown: onInternalInputMouseDown, onInputChange, onInputPaste, - compositionStatus, + compositionStatus: compositionStatus.value, onInputCompositionStart, onInputCompositionEnd, };