[Select] 受控可搜索 Select 且设置 autoClearSearchValue 为 false 时，选中选项后搜索关键字保留但面板选项被更新

[YannLynn]

Is there an existing issue for this?

• [X] I have searched the existing issues

Which Component

Select

Semi Version

latest

Current Behavior

受控可搜索 Select 且设置 autoClearSearchValue 为 false 时，选中选项后搜索关键字保留但面板选项被更新

Expected Behavior

选中选项后搜索关键字保留且面板选项不被重置

Steps To Reproduce

当前行为：

预期行为：

ReproducibleCode

import React, { useState } from 'react';
import { Select } from '@douyinfe/semi-ui';

() => {
    let [value, setValue] = useState('xigua');
    return (
        <>
            <Select filter multiple autoClearSearchValue={false}  value={value} style={{ width: '300px' }} onChange={setValue} placeholder="受控的Select">
                <Select.Option value="abc">抖音</Select.Option>
                <Select.Option value="ulikecam">轻颜相机</Select.Option>
                <Select.Option value="jianying">剪映</Select.Option>
                <Select.Option value="xigua">西瓜视频</Select.Option>
            </Select>
        </>
    );
};

Environment

- OS:
- browser:

Anything else?

No response

[YyumeiZhang]

v2.28.0-beta.1 已发版

[pointhalo]

PR 1388 的修改带来一个新的问题，由于未考虑到 remote场景， remote 且 autoClearSearchValue 为false时，更新 optionList后会拿sugInput 与 new OptionLList 再执行一次 filterOption，从而导致新更新的 optionList 的 _show 可能会为false，从而显示空列表

影响范围 v2.28 - 2.31

const updateCase = () => {
    const [loading, setLoading] = useState(false);
    const optionList =[
        {
            name: "Semi",
            id: '4533',
            chain: '',
            searchStr: ''
        }
        ];
    const [list, setList] = useState(optionList);
    const [value, setValue] = useState('');

    const handleMultipleChange = newValue => {
        setValue(newValue);
    };

    const data2 = [
        {
            name: "Design",
            id: '123456',
            chain: '',
            searchStr: ''
        }
    ]

    const handleSearch = async (inputValue) => {
        setLoading(true);
        let result = [];
        if (inputValue) {
            setTimeout(() => {
                setLoading(false);
                setList(data2);
            }, 1000);
        } else {
            setList(optionList)
            setLoading(false);
        }
    };

const renderSelect = (item, index) => {
  return (
    <Select.Option key={item.id} {...item} value={item.id}>
      <span>{item.chain} {item.name}</span>
    </Select.Option>
  );
};

    return (
        <Select
            autoClearSearchValue={false}
            style={{ width: 300 }}
            filter
            remote
            onChangeWithObject
            multiple
            value={value}
            onSearch={debounce(handleSearch, 1000)}
            loading={loading}
            onChange={handleMultipleChange}
        >
        {list.map((item, index) => renderSelect(item, index))}
        </Select>
    );
};