[AutoComplete] 使用方向键切换选项后，希望自动滚动

[DaiQiangReal]

Is there an existing issue for this?

• [X] I have searched the existing issues

Which Component

autoComplete

Semi Version

No response

Current Behavior

https://user-images.githubusercontent.com/29626873/229041085-1c803b75-7d64-48fc-85d8-7df20937c6d8.mp4

Expected Behavior

高亮正常

Steps To Reproduce

No response

ReproducibleCode

import React from 'react';
import { AutoComplete } from '@douyinfe/semi-ui';
import { IconSearch } from '@douyinfe/semi-icons';

class ObjectDemo extends React.Component {
    constructor() {
        super();
        this.state = {
            list: [
                { value: 'abc', label: 'douyin', email: '1@gmail.com', type: 2 },
                { value: 'hotsoon', label: 'huoshan', email: '2@gmail.com', type: 3 },
                { value: 'pipixia', label: 'pip', email: '3@gmail.com' },
                 { value: 'pipixia', label: 'pip', email: '3@gmail.com' },
                  { value: 'pipixia', label: 'pip', email: '3@gmail.com' },
                   { value: 'pipixia', label: 'pip', email: '3@gmail.com' },
                    { value: 'pipixia', label: 'pip', email: '3@gmail.com' },
                     { value: 'pipixia', label: 'pip', email: '3@gmail.com' },
                      { value: 'pipixia', label: 'pip', email: '3@gmail.com' },
                       { value: 'pipixia', label: 'pip', email: '3@gmail.com' },
            ],
            loading: false,
        };
        this.onSearch = this.onSearch.bind(this);
        this.handleSelect = this.handleSelect.bind(this);
        this.renderItem = this.renderItem.bind(this);
        this.renderSelectedItem = this.renderSelectedItem.bind(this);
        this.search = debounce(this.search.bind(this), 200);
    }

    onSearch(inputValue) {
        this.setState({ loading: true });
        this.search(inputValue);
    }

    search(inputValue) {
        let { list } = this.state;
        const newList = list.map(item => {
            let num = Math.random()
                .toString()
                .slice(2, 5);
            let option = inputValue + '-' + num;
            return { ...item, label: '名称:' + option, value: option };
        });
        this.setState({ list: newList, loading: false });
    }

    handleSelect(value) {
        console.log(value);
    }

    renderItem(item) {
        return (
            <div>
                <div>{item.label}</div>
                <div>email: {item.email}</div>
                <div style={{ color: 'pink' }}>value: {item.value}</div>
            </div>
        );
    }

    renderSelectedItem(item) {
        // 注意：与Select不同，此处只能返回String类型的值，不能返回ReactNode
        return item.value;
    }

    render() {
        const { loading } = this.state;
        return (
            <div>
                <AutoComplete
                    data={this.state.list}
                    style={{ width: 250 }}
                    prefix={<IconSearch />}
                    onSearch={this.onSearch}
                    loading={loading}
                    onChangeWithObject
                    renderItem={this.renderItem}
                    renderSelectedItem={this.renderSelectedItem}
                    onSelect={this.handleSelect}
                    maxHeight='400px'
                ></AutoComplete>
            </div>
        );
    }
}

Environment

- OS:
- browser:

Anything else?

No response

[shijiatongxue]

没看明白问题是啥，具体是哪里故障了。

[congziqi77]

没看明白问题是啥，具体是哪里故障了。

下拉框数据过多时候,使用键盘向下选择到隐藏数据，下拉框不会变化

[YyumeiZhang]

类似的issue

607 #169

以上 issue 是有关 select 的修改， Select 当前存在的问题是从最后一个切换到第一个会无法将聚焦移动到第一个选项，预计和选择器有关，修改本issue时候同步修改下这个问题