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

[DaiQiangReal]

Is there an existing issue for this?

• I have searched the existing issues

Which Component

autoComplete

Semi Version

No response

Current Behavior

20230331-142956.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时候同步修改下这个问题

[pointhalo]

• @YyumeiZhang 这个case我在解决 select问题的时候顺带看了一下，在 fix: autoComplete can't scroll when keyboard up and down, #1530 #2501 这个PR提交了，后续可以 review一下。

• 上述提到的【 Select 当前存在的问题是从最后一个切换到第一个会无法将聚焦移动到第一个选项】是因为select内部维护 focusIndex是从0开始的，而 nth-child是从1开始编号的，所以有时候会对不上，找不到对应的DOM滚不动（已经在fix: Select renderOptionItem can't autoScroll to active item when use keyboard arrowDown/arrowUp #2498 修复过）

[YyumeiZhang]

@pointhalo 对于 Select 问题的修复，还有以下的问题

由于 autoComplete 中未提供 slot，因此无同样情况

[pointhalo]

@pointhalo 对于 Select 问题的修复，还有以下的问题 由于 autoComplete 中未提供 slot，因此无同样情况

新问题？后续单独处理吧。