Unmount UModal or USlideover when closed

[robinsimonklein]

Description

Hi there,
First of all, thanks for the amazing work on the v3, it looks really promising !

I'm struggling with USlideover in a CRUD app. What I'm trying to build is a table listing posts (using UTable), from which you can open post details in a USlideover, or open a form to edit this post also in a USlideover. I feel like the programmatic usage of USlideover (with useSlideover and a dedicated component) would be the most appropriate. This would also allow me to open posts info or edit form from elsewhere in the app.

But I can't get it to work properly. In fact, since the component only mounts once when opening the Slideover for the first time, it seems difficult to change the content at the right time without using tricky workarounds.

So the question : is there already a way to force USlideover to mount/unmount on open/close ? Or should we implement this as a feature (i.e: a unmount prop) ?

Or, am I doing it wrong and there is a more convenient way to do this ?

Here you can find a small and basic reproduction with just the "show" details slideover : https://codesandbox.io/p/github/robinsimonklein/nuxt-ui-3-crud-slideover/main?import=true or https://github.com/robinsimonklein/nuxt-ui-3-crud-slideover

Thanks for your help!

[PHPfanatic]

I had this issue also and found that using .reset() after closing and/or before opening my next slideover with different content worked for me.
This is an example of a function that I use to accomplish this.

const userSlideOver = useSlideover()

function openEditUser() {
  userSlideOver.open(UserEditSlideover, {
    'userData': activeUser,
    onSuccess() {
      userRefresh()
      userSlideOver.close()
      userSlideOver.reset()
    }
  })
}

I'm calling reset within my onSuccess callback, however there should not be a reason that you cannot call it prior to firing just before your open command.

Here is an additional example where I call reset outside of the callback.

const userSlideOver = useSlideover()

const handleUserSelection = (event: Event) => {
  const target = event.target as HTMLInputElement
  activeUser.value = userRecords.value.find(user => user.uniqueId === target.getAttribute('data-id')) || null
  userSlideOver.reset()
}

// now I can call userSlideOver.open and my new user that was selected information is visible.

Hope this helps.

[schillerenrico]

@robinsimonklein For me, I am using :key on the component <USlideover :key="random"> which forces to rerender it each time the key changes

Maybe this is related to it as well #3105