Vuetify中带open-on-hover的v-menu悬停v-select下拉列表时自动关闭问题

复现步骤 #

• 新增一个配置了open-on-hover属性的v-menu组件
• 向该v-menu内部添加v-select或v-combobox组件

问题现象 #

v-menu处于打开状态时，触发v-select或v-combobox显示下拉列表，若将鼠标悬停在该下拉列表上，v-menu会自动关闭，仅悬停在v-select/v-combobox弹出的下拉列表时才会触发该问题。
已尝试调用event.stopPropagation()方法阻止事件冒泡，未能解决该问题。

根因说明 #

该问题的核心原因是v-select/v-combobox的下拉列表默认挂载到body根节点，不属于v-menu的内部DOM结构，v-menu的悬停检测机制会判定鼠标移出了自身有效交互区域，因此触发自动关闭逻辑。

解决方案 #

方案1（推荐，无副作用） #

给v-select/v-combobox添加attach属性，指定下拉列表挂载到父级v-menu的内部DOM节点下，让悬停检测判定下拉区域属于v-menu的内部交互范围，从根源避免误判关闭。
示例代码：

<v-menu open-on-hover>
  <template v-slot:activator="{ props }">
    <v-btn v-bind="props">触发菜单</v-btn>
  </template>
  <v-select
    :items="['选项1', '选项2', '选项3']"
    attach
    label="选择内容"
  />
</v-menu>

attach属性传入布尔值true时，默认将下拉列表挂载到组件的直接父节点下，适配绝大多数场景。

方案2（适配特殊场景） #

如果无法修改下拉列表的挂载节点，可以给v-menu配置close-delay属性延长关闭判定的延迟时间，避免鼠标移动到下拉列表的短时间内触发关闭：

<v-menu 
  open-on-hover
  :close-delay="300"
>
  <!-- 内部v-select/v-combobox代码 -->
</v-menu>

内容的提问来源于stack exchange，提问作者Dra Lucinda