How to render Dialog using v-if

[JarvisH]

Describe the feature

Hallo.

This may be a question of best practices and a new feature is perhaps not needed, but here goes:

When using Dialog components, they are rendered to the DOM using the open Property. This works just fine with a few exceptions:

• Any requests or logic executed inside such a modal component may need to be delayed until open is true.
• Any state set as refs of form values often needs to be reset when showing the Dialog.

Such manual cleanup could be avoided when using v-if to render the Dialog, as it gets remounted when shown:

// Does not reset state or prevent code execution
<SomeDialogComponent :open="showDialog" />

// Does reset state and prevent code execution
<SomeDialogComponent v-if="showDialog" />

v-if however does not play well with <DialogPortal /> and Vue <Transition />, essentially breaking animations.

So the question is: could this easily be implemented in Radix? I managed to solve it using a wrapper component and provide/inject, but a built-in solution would be great. Or is the issue caused by bad practices on my part?

FYI my solution where the open state is handled internally via a wrapper component, which can listen to the afterLeave event of the Vue transition.

<DialogRender v-if="show" @after-leave="show=false">
    <SomeDialogComponent />
</DialogRender>

Additional information

• I intend to submit a PR for this feature.
• I have already implemented and/or tested this feature.

[sadeghbarati]

Dialogs are already removed from the DOM when it is closed, I think there is no need to use v-if

For best practices use @vueuse/core createReusableTemplate

[zernonia]

@JarvisH can you share the code for SomeDialogComponent ? Perhaps this would be better for a discussion since most likely it's about the component usage 😁

[JarvisH]

Hi @zernonia, thanks for converting this into a discussion. The problem I am trying to describe is not unique to Radix, it is a fundamental issue when using v-if with nested <Teleport> and <Transition>.

Imagine a component looking like this:

// SomeDialog.vue
<template>
  <DialogRoot :open="open">
    <DialogPortal>
      <Transition>
        <DialogOverlay>
          <DialogContent>
            {{ someRequestResponse }}

            <input v-model="inputValue" type="text" />
          </DialogContent>
        </DialogOverlay>
      </Transition>
    </DialogPortal>
  </DialogRoot>
</template>

<script lang="ts" setup>
  defineProps<{
    open: boolean
  }>()

const inputValue = ref('')

const someRequestResponse = await fetch(...)
</script>

and the in the parent component:

<template>
  <SomeDialog :open="true" />
</template>

When rendering a Dialog component (or any Vue component for that matter) using the property open instead of v-if, that component suddenly may have to ensure that:

• Any state is reset when toggling the component visibility. In the above case the input field v-model.
• Any Requests are not triggered before the Component is actually visible, i.e. the fetch call in the above example.

Using v-if ensures the entire component is mounted and re-rendered and any state is automatically reset and any requests are only made when the component is mounted.

The only thing is, that transitions inside Portals/Teleports do not work directly using v-if.

Long story short: v-if is convenient, it saves a bunch of boilerplate logic to manage resetting of state and delaying requests, but does not work with nested Teleports/Transitions.

[stevebauman]

Having this issue as well