From 6e2c5a6a83d5f83ec20a4f83a8319747d4ae2fe9 Mon Sep 17 00:00:00 2001
From: Carl Chen <71313168+cc-hearts@users.noreply.github.com>
Date: Tue, 4 Jun 2024 18:59:24 +0800
Subject: [PATCH] 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 <415800467@qq.com>
---
 .../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 c4eaa7464..50aa6ea42 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: 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 --git a/components/vc-select/Selector/index.tsx b/components/vc-select/Selector/index.tsx
index e06a010b4..4ee018bea 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<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,
       };