javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-16 18:17:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(vue): unmount teleported components (#26647)

Browse Source 
Resolves #26644
This commit is contained in:
Sean Perkins
2023-01-20 11:23:27 -05:00
committed by GitHub
parent 22e9ff866f
commit 6b16a0c020
4 changed files with 63 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
packages/vue/src/components/IonApp.ts
View File

@ -31,14 +31,7 @@ export const addTeleportedUserComponent = (component: VNode) => {
};
export const removeTeleportedUserComponent = (component: VNode) => {
/**
* Finds the index of the component in the array and removes it.
* Previously we were using a filter to remove the component from the array,
* but this was causing a bug where dismissing an overlay and then presenting
* a new overlay, would cause the new overlay to be removed.
*/
const index = userComponents.value.findIndex((cmp) => cmp === component);
if (index !== -1) {
userComponents.value.splice(index, 1);
}
userComponents.value = userComponents.value.filter(
(cmp) => cmp !== component
);
};

20
packages/vue/src/framework-delegate.ts
View File

@ -11,7 +11,9 @@ export const VueDelegate = (
addFn = addTeleportedUserComponent,
removeFn = removeTeleportedUserComponent
): FrameworkDelegate => {
let Component: VNode | undefined;
// `h` doesn't provide a type for the component argument
const refMap = new WeakMap<any, VNode>();
// TODO(FW-2969): types
const attachViewToDom = (
parentElement: HTMLElement,
@ -32,15 +34,23 @@ export const VueDelegate = (
classes && div.classList.add(...classes);
parentElement.appendChild(div);
Component = h(Teleport, { to: div }, h(component, { ...componentProps }));
const hostComponent = h(
Teleport,
{ to: div },
h(component, { ...componentProps })
);
addFn(Component);
refMap.set(component, hostComponent);
addFn(hostComponent);
return Promise.resolve(div);
};
const removeViewFromDom = () => {
Component && removeFn(Component);
const removeViewFromDom = (_container: any, component: any) => {
const hostComponent = refMap.get(component);
hostComponent && removeFn(hostComponent);
return Promise.resolve();
};