[Bug]: Dialog's top right close icon cannot close the dialog if open the dialog programmatically

[sunny-repo88]

Environment

Radix Vue version: 1.2.4

Link to minimal reproduction

https://github.com/sunny-repo88/shadcn-vue-dialog-bug

Steps to reproduce

`
<script setup lang="ts">
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog'
import { Button } from '@/components/ui/button'
import { ref } from 'vue'

const open = ref(false)

</script>

<template>
  <Dialog :open="open">
    <DialogTrigger>
      <Button @click="open = true">Edit Profile</Button>
    </DialogTrigger>
    <DialogContent>
      <DialogHeader>
        <DialogTitle>Edit profile</DialogTitle>
        <DialogDescription>
          Make changes to your profile here. Click save when you're done.
        </DialogDescription>
      </DialogHeader>

      <DialogFooter>
        Save changes
      </DialogFooter>
    </DialogContent>
  </Dialog>
</template>
`

Describe the bug

right top icon cannot close the dialog

Expected behavior

right top icon should be able to close the dialog

Conext & Screenshots (if applicable)

No response

[sadeghbarati]

You are using Controlled Component which you control the (open) state (show/hide) in this case, you should handle the hiding or showing of the component

You could use

• v-model:open="open" easy way ✅ or
• :open="open" and @update:open="(openState) => (open = openState)" 🙅

Dialog demo here: https://stackblitz.com/edit/github-eurciq?file=src%2FApp.vue

[sadeghbarati]

If you want to use UnControlled Component and still want to show dialog by default you could use

defaultOpen prop which you can read about in MAIN radix-vue documentation

[sunny-repo88]

@sadeghbarati , thanks!