Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

select 多选时,悬浮在选项上的高亮,在内容浮层关闭后,再次点击下拉,之前的选项依然会高亮,但是单选就不会;这个是功能特性吗(官方的示例也是这样的),如果不想要这个高亮怎么处理? #7307

Open
1 task
Miss-An opened this issue Jan 24, 2024 · 5 comments

Comments

@Miss-An
Copy link

Miss-An commented Jan 24, 2024

  • I have searched the issues of this repository and believe that this is not a duplicate.

Version

3.2.20

Environment

windows ,chrome、vue3

Reproduction link

https://3x.antdv.com/components/select-cn/#components-select-demo-custom-dropdown

Steps to reproduce

select 设置多选;
鼠标悬浮到一个选项上会高亮,然后移除内容浮层
点击浮层关闭后,再次打开下拉内容浮层,之前的高亮还在

What is expected?

再次打开下拉内容浮层,之前的高亮消失

What is actually happening?

再次打开下拉内容浮层,之前的高亮没有消失

@selicens
Copy link
Member

这一项被选择了

@Miss-An
Copy link
Author

Miss-An commented Jan 25, 2024

这一项被选择了

并没有选中这一项,只是鼠标移上去了,但是没有点击选中;不是选中的高亮,是悬浮的高亮

@qppq54s
Copy link

qppq54s commented Feb 4, 2024

研究了下代码,应该是选择的浮层关闭时,没有清除当前“聚焦”导致的。
我在vc-select文件夹下的OptionList.tsx修改源码可以实现清除高亮
code-20240204
我研究了下ant.design和antdv的所有版本,发现都有类似的特性。

@qppq54s
Copy link

qppq54s commented Feb 4, 2024

发现一个方法,可以实现你要的功能。

const dropdownVisibleChange = (open: boolean) => {
      if (open) {
        options.value = [...Array(25)].map((_, i) => ({
          value: (i + 10).toString(36) + (i + 1),
          disabled: true,
        }));
        setTimeout(() => {
          options.value = [...Array(25)].map((_, i) => ({
            value: (i + 10).toString(36) + (i + 1),
          }));
        });
      }
    };

@Miss-An
Copy link
Author

Miss-An commented Mar 25, 2024

这种方式可能每个都要单独处理

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants