Close datepicker on select?

[9mm]

So far I have been searching how to do this extremely basic feature... I see this long discussion in react shad-cn of all these insane hacks simply to close a date picker on select. Im hoping its trivial in shadcn-vue/radix-vue 🤔

[sadeghbarati]

radix-vue/shadcn-vue is not framework lib, it provides us with low-level primitives, it is our duty to make it more functional

---

1. You can use the controlled Popover and watch the Calendar v-model control the open state with ref

---

2. You can use PopoverClose with as-child prop with CalendarCellTrigger like

<CalendarGridBody class="grid">
  <CalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="mt-2 w-full">
    <CalendarCell
      v-for="weekDate in weekDates"
      :key="weekDate.toString()"
      :date="weekDate"
    >
      <PopoverClose as-child>
        <CalendarCellTrigger
          :day="weekDate"
          :month="month.value"
        />
      </PopoverClose>
    </CalendarCell>
  </CalendarGridRow>
</CalendarGridBody>

https://stackblitz.com/edit/apelnx?file=src%2Fcomponents%2Fui%2Fcalendar%2FCalendarCellTrigger.vue