|
1 | 1 | import type { PropType } from 'vue';
|
2 |
| -import { defineComponent, h, onScopeDispose, ref, toRef, watchEffect } from 'vue'; |
| 2 | +import { defineComponent, h, onUnmounted, ref, watch, watchEffect } from 'vue'; |
3 | 3 |
|
4 | 4 | import type { CustomPortalsRendererProps } from '../types';
|
5 | 5 | import { ClerkLoaded } from './controlComponents';
|
@@ -44,30 +44,35 @@ export const ClerkHostRenderer = defineComponent({
|
44 | 44 | },
|
45 | 45 | setup(props) {
|
46 | 46 | const portalRef = ref<HTMLDivElement | null>(null);
|
47 |
| - const isPortalMounted = ref(false); |
48 |
| - // Make the props reactive so the watcher can react to changes |
49 |
| - const componentProps = toRef(props, 'props'); |
| 47 | + let isPortalMounted = false; |
50 | 48 |
|
51 | 49 | watchEffect(() => {
|
52 |
| - if (!portalRef.value) { |
| 50 | + // Skip if portal element isn't ready or component is already mounted |
| 51 | + if (!portalRef.value || isPortalMounted) { |
53 | 52 | return;
|
54 | 53 | }
|
55 | 54 |
|
56 |
| - if (isPortalMounted.value) { |
57 |
| - props.updateProps?.({ node: portalRef.value, props: componentProps.value }); |
58 |
| - } else { |
59 |
| - if (props.mount) { |
60 |
| - props.mount(portalRef.value, componentProps.value); |
61 |
| - } |
62 |
| - if (props.open) { |
63 |
| - props.open(componentProps.value); |
64 |
| - } |
65 |
| - isPortalMounted.value = true; |
| 55 | + if (props.mount) { |
| 56 | + props.mount(portalRef.value, props.props); |
| 57 | + } |
| 58 | + if (props.open) { |
| 59 | + props.open(props.props); |
66 | 60 | }
|
| 61 | + isPortalMounted = true; |
67 | 62 | });
|
68 | 63 |
|
69 |
| - onScopeDispose(() => { |
70 |
| - if (isPortalMounted.value && portalRef.value) { |
| 64 | + watch( |
| 65 | + () => props.props, |
| 66 | + newProps => { |
| 67 | + if (isPortalMounted && props.updateProps && portalRef.value) { |
| 68 | + props.updateProps({ node: portalRef.value, props: newProps }); |
| 69 | + } |
| 70 | + }, |
| 71 | + { deep: true }, |
| 72 | + ); |
| 73 | + |
| 74 | + onUnmounted(() => { |
| 75 | + if (isPortalMounted && portalRef.value) { |
71 | 76 | if (props.unmount) {
|
72 | 77 | props.unmount(portalRef.value);
|
73 | 78 | }
|
|
0 commit comments