ITADN

document.activeElement state lost after rendering

#317Openkristiankostadinov 创建于 2024-06-25
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** ![image](https://github.com/testing-library/vue-testing-library/assets/6861663/44a8ab95-ca40-4f20-93a2-bdf61e46fa6b) **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 条评论