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组件无法自动关闭下拉框 #2564

Open
1 task
lubo3395 opened this issue Jul 14, 2023 · 8 comments · May be fixed by #2567
Open
1 task

select组件无法自动关闭下拉框 #2564

lubo3395 opened this issue Jul 14, 2023 · 8 comments · May be fixed by #2567
Assignees
Labels
status: need more info Need more info type: 🐞 bug Something isn't working

Comments

@lubo3395
Copy link

Basic Info

  • Package Name And Version: @arco-design/web-vue@2.44.7
  • Framework version: 3.2.40
  • Browser: chrome114.0.0.0

Steps to reproduce

select组件在使用 popup-container="#myselect" 属性时,在切换选项时无法自动关闭下拉框

@lubo3395
Copy link
Author

尝试了使用v-model:popup-visible来控制,也没有解决

@flsion flsion added the type: 🐞 bug Something isn't working label Jul 14, 2023
@flsion flsion self-assigned this Jul 14, 2023
@flsion
Copy link
Member

flsion commented Jul 14, 2023

@lubo3395 麻烦提供一个复现地址,我们看一下

@flsion flsion added the status: need more info Need more info label Jul 14, 2023
@lubo3395
Copy link
Author

lubo3395 commented Jul 14, 2023

@lubo3395麻烦提供一个详细地址,我们看一下

下面的这个地址复现了问题

https://codesandbox.io/s/arco-design-vue-bug-select-popup-x5pgzc?file=/src/App.vue

@kaikaibenkai
Copy link
Contributor

kaikaibenkai commented Jul 15, 2023

可以看到 arco-trigger-popup 原本是挂载到 body 的,用户选择后加了个样式 display: none,但指定了 popup-container 后再选择没有添加 display: none 导致了这个问题

鉴定完毕:

  • 正常情况下,触发 update 的时机:
    • 聚焦到输入框(用户点击输入框)
    • 下拉框失焦(下拉框打开后,用户点击下拉框外的区域)
  • popup-container 挂到自己时,触发 update 的时机
    • 聚焦到输入框(用户点击输入框)
    • 下拉框失焦(下拉框打开后,用户点击下拉框外的区域)
    • ❗选项被点击(点击下拉框中的选项)

挂到自己时,如果选项被点击,触发 updatevisible = true,所以下拉框仍然显示

这里的问题在于,挂到自己时点击选项时触发了 handleClick

@flsion
Copy link
Member

flsion commented Jul 21, 2023

@lubo3395 @kaikaibenkai 看了下这种用法比较特殊,感觉增加个使用注意,禁止挂载在自身下比较好,比如这里挂载在选择框外层的div上比较合适。选择框和下拉框是两个比较单独的存在

@lubo3395
Copy link
Author

@lubo3395 @kaikaibenkai 看了下这种用法比较特殊,感觉增加个使用注意,禁止挂载在自身下比较好,比如这里挂载在选择框外层的div上比较合适。选择框和下拉框是两个比较单独的存在

我感觉通过组件自身的属性去控制更合适

@kaikaibenkai
Copy link
Contributor

这种写法貌似并没有实际意义,默认就是挂在自己上

@lubo3395
Copy link
Author

这种写法貌似并没有实际意义,默认就是挂在自己上

不是的,你之前有回答过默认是挂在body上的。我想改为挂到自己上面的原因是:当把 select 组件固定在页面顶部导航栏中时,这时如果激活的select的下拉框,然后滚动页面时,下拉框会跟随页面滚动,而不是跟随select组件固定在顶部了。
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
status: need more info Need more info type: 🐞 bug Something isn't working
Projects
None yet
3 participants