document.activeElement state lost after rendering
bug
**Describe the bug**
A component focuses an element in the `onMounted` hook and the focus is lost after the render function.
In the Codesandbox there is a TestButton component that sets the focus in `onMounted`. In the respective test there are two test cases - one using `@testing-library/vue` and one using `@vue/test-utils` directly. The behavior of `document.activeElement` differs between the two.
`@testing-library/vue` loses the state of document.activeElement
**To Reproduce** Steps to reproduce the behavior:
[Codesandbox](https://codesandbox.io/p/devbox/interesting-cerf-hrjhhh?file=%2Fsrc%2Fcomponents%2FTestButton%2FTestButton.test.ts%3A12%2C10&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clxtfe2x100072v6miudx31zp%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clxtfe2x100022v6mqmbjcyws%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clxtfe2x100042v6mqqvwt8ah%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clxtfe2x100062v6m4en78vb3%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clxtfe2x100022v6mqmbjcyws%2522%253A%257B%2522id%2522%253A%2522clxtfe2x100022v6mqmbjcyws%2522%252C%2522activeTabId%2522%253A%2522clxu51rcz00022v6llix3zbet%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clxtfe2x000012v6mwlwln3dh%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252FREADME.md%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Froot%252F.cache%252Fnpm%252F_logs%252F2024-06-24T20_31_01_370Z-debug-0.log%2522%252C%2522id%2522%253A%2522clxtfnpie00ba2v6my6vuy48l%2522%252C%2522mode%2522%253A%2522temporary%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522clxu51rcz00022v6llix3zbet%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A12%252C%2522startColumn%2522%253A10%252C%2522endLineNumber%2522%253A12%252C%2522endColumn%2522%253A10%257D%255D%252C%2522filepath%2522%253A%2522%252Fsrc%252Fcomponents%252FTestButton%252FTestButton.test.ts%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%257D%252C%2522clxtfe2x100062v6m4en78vb3%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clxtfe2x100052v6mdfb5cmbp%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_PORT%2522%252C%2522taskId%2522%253A%2522pnpm%2520run%2520dev%2522%252C%2522port%2522%253A5173%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522clxtfe2x100062v6m4en78vb3%2522%252C%2522activeTabId%2522%253A%2522clxtfe2x100052v6mdfb5cmbp%2522%257D%252C%2522clxtfe2x100042v6mqqvwt8ah%2522%253A%257B%2522id%2522%253A%2522clxtfe2x100042v6mqqvwt8ah%2522%252C%2522activeTabId%2522%253A%2522clxtfmouv00992v6m2prw0htr%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clxtfe2x100032v6mztp1ghz1%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522pnpm%2520run%2520dev%2522%257D%252C%257B%2522id%2522%253A%2522clxtfmouv00992v6m2prw0htr%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TERMINAL%2522%252C%2522shellId%2522%253A%2522clxtfmoww0068dhhuc7w90cd3%2522%257D%255D%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D)
**Expected behavior**
`document.activeElement` should be the button that was focused in the `onMounted` hook
**Screenshots**

**Related information:**
- `@testing-library/vue` version: 8.1.0
- `Vue` version: 3.4.15
- `node` version: v20.12.0
- `npm` (or `yarn`) version: npm 10.5.0
Relevant code or config (if any)
TestButton.vue
```
<template>
<div>
<button ref="button">Test</button>
</div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
const button = ref<HTMLButtonElement | null>(null);
onMounted(() => {
console.info(document.activeElement?.nodeName); // <- body
button.value?.focus();
console.info(document.activeElement?.nodeName); // <- button
});
</script>
```
```
import { render } from "@testing-library/vue";
import { mount } from "@vue/test-utils";
import TestButton from "./TestButton.vue";
describe("TestButton", () => {
it("test @vue/test-utils", () => {
const wrapper = mount(TestButton, { attachTo: document.body });
console.info(document.activeElement?.nodeName); // <- button
expect(document.activeElement?.nodeName).toBe("BUTTON");
wrapper.unmount();
});
it("test @testing-library/vue", () => {
const { unmount } = render(TestButton, { container: document.body });
console.info(document.activeElement?.nodeName); // <- (!) body
expect(document.activeElement?.nodeName).toBe("BUTTON");
unmount();
});
});
```
1 条评论