Skip to content

fix(VSelect): correct focus resolution in Shadow DOM - #23102

Open
lazerg wants to merge 1 commit into
vuetifyjs:masterfrom
lazerg:fix/23101-vselect-shadow-dom-active-element
Open

fix(VSelect): correct focus resolution in Shadow DOM#23102
lazerg wants to merge 1 commit into
vuetifyjs:masterfrom
lazerg:fix/23101-vselect-shadow-dom-active-element

Conversation

@lazerg

@lazerg lazerg commented Aug 12, 2026

Copy link
Copy Markdown
Contributor

Description

Inside a shadow root, document.activeElement only resolves to the shadow host, not the actual focused element, so onAfterEnter's containment check in VSelect always reports false and the fallback focus-move logic fires even when focus is already inside the list. This is the same issue #23024 and #23027 fixed for VDialog, VField, VTextField, and the rest; VSelect (and VAutocomplete/VCombobox by extension) was the one production usage they missed. Swapped document.activeElement for the existing getActiveElement() helper, the same one-line fix used in the sibling components.

Fixes #23101

Markup:

<template>
  <v-app>
    <v-container>
      <p class="mb-4">Open the select, then use arrow keys — focus should stay put instead of jumping back to the first item.</p>
      <shadow-demo />
    </v-container>
  </v-app>
</template>

<script setup lang="ts">
  import { defineComponent, defineCustomElement, h } from 'vue'
  import { VSelect } from '@/components/VSelect'
  import { VThemeProvider } from '@/components/VThemeProvider'
  import vuetify from './vuetify'

  const Demo = defineComponent(() => {
    return () => h(VSelect, {
      label: 'items',
      items: ['one', 'two', 'three', 'four', 'five'],
    })
  })

  const App = defineComponent({
    setup: () => () => h(VThemeProvider, { withBackground: true }, () => h(Demo)),
  })

  if (!customElements.get('vv-select')) {
    customElements.define('vv-select', defineCustomElement(App, {
      configureApp: app => app.use(vuetify),
    }))
  }

  const ShadowDemo = defineComponent({
    render: () => h('vv-select'),
  })
</script>

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

Successfully merging this pull request may close these issues.

VSelect.tsx still checks raw document.activeElement, missed by the #23024/#23027 Shadow DOM focus fixes

1 participant