fix[select]: fix placeholder error when inputting Chinese (#7611)

* fix[select]: fix placeholder error when inputting Chinese

fix(selector): fix placeholder error when inputting Chinese

perf: optimize types

* Update SingleSelector.tsx

* Update index.tsx

---------

Co-authored-by: tangjinzhou <[email protected]>

Author: cc-hearts

Diff for: 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: boolean;
 }
 const props = {
   inputElement: PropTypes.any,
@@ -20,6 +23,7 @@ const props = {
   searchValue: String,
   inputRef: PropTypes.any,
   placeholder: PropTypes.any,
+  compositionStatus: { type: Boolean, default: undefined },
   disabled: { type: Boolean, default: undefined },
   mode: String,
   showSearch: { type: Boolean, default: undefined },
@@ -65,7 +69,9 @@ const SingleSelector = defineComponent<SelectorProps>({
 
     // 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,
     );
 
     const title = computed(() => {

Diff for: 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<SelectorProps>({
   } 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<SelectorProps>({
         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<SelectorProps>({
     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<SelectorProps>({
         onInputMouseDown: onInternalInputMouseDown,
         onInputChange,
         onInputPaste,
+        compositionStatus: compositionStatus.value,
         onInputCompositionStart,
         onInputCompositionEnd,
       };