Reactive props with programmatic modals

[rigtigeEmil]

Description

Heya. Is there a way to open a modal, while passing props and keep their reactivity?

const localModalValue = ref(false);
const isLoading = ref(false);

useModal().open(MyModal, {
	modelValue: localModalValue,
	isLoading: isLoading
});

[noook]

If your MyModal component emits events (the recommended way to update a prop), you should be able to achieve something like this:

const localModalValue = ref(false);
const isLoading = ref(false);

useModal().open(MyModal, {
  modelValue: localModalValue.value,
  isLoading: isLoading.value,
  'onUpdate:modelValue': value => localModalValue.value = value,
  'onUpdate:isLoading': value => isLoading.value = value,
});

This example assumes the events that update those props are update:model-value and update:is-loading adjust depending on your event names.

[rigtigeEmil]

@noook This part is fine, the issue is that if i update localModalValue (outside of the modal), it's not reflected in the modal itself

[noook]

Yes, this is a caveat of using programmatic modals. Values are only passed at instantiation and are not tracked by the reactive system at this point. Your usage of the modal by passing refs should make the modal reactive to the ref changes. Typescript might complain but it could actually work. Isn't it already reactive ?

[messenjer]

You can use patch

	const localModalValue = ref(false);
	const isLoading = ref(false);

	const modal = useModal();
	modal.open(MyModal, {
		modelValue: localModalValue,
		isLoading: isLoading,
	});

	watch(isLoading, () => modal.patch<typeof MyModal>({ isLoading: isLoading }));

[github-actions[bot]]

This issue is stale because it has been open for 30 days with no activity.

[benjamincanac]

@genu is this fixed in v3? 🤔

[genu]

Although, this is a bit of an anti-pattern, it is possible to pass reactive props to dynamic components.

A dynamic component would declare its props like so:

defineProps<{
  count: Ref<number>
}>()

And the parent component:

const count = ref(0)

const modal = overlay.create(LazyModalExample, {
  props: {
    count
  }
})

function openModal() {
  modal.open()
}