mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2024-11-21 01:02:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(hooks): PopperContainer cannot be recreated when body is recreated (#18121)

Browse Source 
In the micro-front-end scenario, the body is recreated; Because PopperContainer determines that the
cache exists and does not recreate it, teleport cannot find the element to mount.

closed #18115,#17710

Co-authored-by: chenjingwen <chenjingwen@sie.com>
This commit is contained in:
kimverchan 2024-09-03 20:25:15 +08:00 committed by GitHub
parent c25026c542
commit 29a21e86ba
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 20 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
packages/hooks/__tests__/use-popper-container.test.tsx
View File

@ -36,7 +36,23 @@ describe('usePopperContainer', () => {
const { vm } = mountComponent()
await nextTick()
const { selector } = vm
expect(document.body.querySelector(selector.value)).toBeDefined()
expect(
document.body.querySelector(selector)?.id === selector.slice(1)
).toBeTruthy()
})
it('should append container from the DOM root again when container is destroyed', async () => {
mountComponent()
await nextTick()
document.body.innerHTML = ''
process.env.NODE_ENV = ''
const { vm } = mountComponent()
await nextTick()
process.env.NODE_ENV = 'test'
const { selector } = vm
expect(
document.body.querySelector(selector)?.id === selector.slice(1)
).toBeTruthy()
})
it('should not append container to the DOM root', async () => {
@ -44,7 +60,7 @@ describe('usePopperContainer', () => {
const { vm } = mountComponent()
await nextTick()
const { selector } = vm
expect(document.body.querySelector(selector.value)).toBeNull()
expect(document.body.querySelector(selector)).toBeNull()
})
})

3
packages/hooks/use-popper-container/index.ts
View File

@ -37,7 +37,8 @@ export const usePopperContainer = () => {
// for this we need to disable the caching since it's not really needed
if (
process.env.NODE_ENV === 'test' ||
(!cachedContainer && !document.body.querySelector(selector.value))
!cachedContainer ||
!document.body.querySelector(selector.value)
) {
cachedContainer = createContainer(id.value)
}