fix[Selector]: fix component controlled display

[cc-hearts]

resolve #7747

[github-actions]

This PR is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days

[Limoer96]

@cc-hearts 试了一下，这种修改方式会在中文输入时异常，我觉得更好的方式是在处理searchText分词前，执行一下props.onSearch。

[alicemw]

@cc-hearts 试了一下，这种修改方式会在中文输入时异常，我觉得更好的方式是在处理searchText分词前，执行一下props.onSearch。

具体怎么弄的啊？大佬

[Limoer96]

@cc-hearts 试了一下，这种修改方式会在中文输入时异常，我觉得更好的方式是在处理searchText分词前，执行一下props.onSearch。

具体怎么弄的啊？大佬

找到vc-select/BaseSelect.tsx文件，修改onInternalSearch函数为以下代码：

const onInternalSearch = (searchText: string, fromTyping: boolean, isCompositing: boolean) => {
  let ret = true;
  let newSearchText = searchText;
  // Check if match the `tokenSeparators`
  const patchLabels: string[] = isCompositing
    ? null
    : getSeparatedContent(searchText, props.tokenSeparators);
  props.onActiveValueChange?.(null);
  if (props.onSearch && mergedSearchValue.value !== newSearchText) {
    props.onSearch(newSearchText, {
      source: fromTyping ? 'typing' : 'effect',
    });
  }
  // Ignore combobox since it's not split-able
  if (props.mode !== 'combobox' && patchLabels) {
    newSearchText = '';
    // should trigger onSearch again if splitable
    nextTick(() => {
      props.onSearch?.(newSearchText, {
        source: 'blur',
      });
    });

    props.onSearchSplit?.(patchLabels);

    // Should close when paste finish
    onToggleOpen(false);

    // Tell Selector that break next actions
    ret = false;
  }
  return ret;
};

[alicemw]

@cc-hearts 试了一下，这种修改方式会在中文输入时异常，我觉得更好的方式是在处理searchText分词前，执行一下props.onSearch。

具体怎么弄的啊？大佬

找到vc-select/BaseSelect.tsx文件，修改onInternalSearch函数为以下代码：

const onInternalSearch = (searchText: string, fromTyping: boolean, isCompositing: boolean) => {
  let ret = true;
  let newSearchText = searchText;
  // Check if match the `tokenSeparators`
  const patchLabels: string[] = isCompositing
    ? null
    : getSeparatedContent(searchText, props.tokenSeparators);
  props.onActiveValueChange?.(null);
  if (props.onSearch && mergedSearchValue.value !== newSearchText) {
    props.onSearch(newSearchText, {
      source: fromTyping ? 'typing' : 'effect',
    });
  }
  // Ignore combobox since it's not split-able
  if (props.mode !== 'combobox' && patchLabels) {
    newSearchText = '';
    // should trigger onSearch again if splitable
    nextTick(() => {
      props.onSearch?.(newSearchText, {
        source: 'blur',
      });
    });

    props.onSearchSplit?.(patchLabels);

    // Should close when paste finish
    onToggleOpen(false);

    // Tell Selector that break next actions
    ret = false;
  }
  return ret;
};

非常感谢