ViewUIPlus icon indicating copy to clipboard operation
ViewUIPlus copied to clipboard

[Bug Report]select 组件需要删除多个选项的时候

Open QRenjie opened this issue 1 year ago • 1 comments

Environment

windows/chomre-Version 131.0.6778.86 (Official Build) (64-bit)/vue2

Reproduction link

https://www.iviewui.com/view-ui-plus/component/form/select#create

Steps to reproduce

  1. 进入 https://www.iviewui.com/view-ui-plus/component/form/select#create
  2. 在第二个多选框中(new york, london。。。)手动增加多个选项,尽可能多
  3. 让select失去焦点,滚动屏幕,将select下半部分在视口外
  4. 现在点击可见的任何项的删除,都无法删除,并且还会附加一个额外的交互:(会自动聚焦一次,然后触发视口聚焦)

只有在select聚焦或在视口中才能删除

What is expected?

  1. 不应该触发select额外的聚焦操作
  2. 只要能点击删除,就可以删除,这是最基本的功能

What is actually happening?

只有在select聚焦或在视口中才能删除

QRenjie avatar Nov 25 '24 02:11 QRenjie

Hello @QRenjie! I'm here to help you with any bugs, questions, or contributions you have. Let's work together to resolve the issue you've encountered.

The issue you're experiencing with the select component in ViewUIPlus, where options cannot be deleted unless the component is focused or fully within the viewport, is related to how the component manages focus and deletion events.

  1. Focus Requirement for Deletion: The select component uses the isFocused data property to determine if it should allow deletion of options. If the component is not focused, the deletion logic is not triggered. This is controlled by the @on-input-focus and @on-input-blur events, which update the isFocused state [1].

  2. Viewport Interaction: The issue of needing the component to be fully within the viewport to delete options might be related to how the component handles focus and click events. The removeTag method, which handles the deletion of options, is only executed if the component is not disabled and is focused [2].

To address this, you might need to adjust the component's logic to allow deletion without requiring focus or being fully visible in the viewport. This could involve modifying the conditions under which the removeTag method is called or adjusting the focus management logic to better handle interactions when part of the component is outside the viewport.

To continue talking to Dosu, mention @dosu.

dosubot[bot] avatar Nov 25 '24 02:11 dosubot[bot]