Datepicker pops up in modal but auto close when click on anything in the datepick menu

I am using headless ui for modal dialog and the date picker is inside the modal. Initial focus is already set on the focusable button. When I click on the date picker component, it pops up the menu just fine, when I start to click anything on it, it closes.

Any advise?

Script setup code:

import { computed, reactive, ref } from 'vue';
import {
  TransitionRoot,
  TransitionChild,
  Dialog,
  DialogOverlay,
  DialogTitle,
} from '@headlessui/vue';
import { XIcon } from '@heroicons/vue/outline';
import PrimaryButton from '@/Components/Commons/PrimaryButton';

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(['hide', 'confirm']);

const form = reactive({
  starts_at: '',
  ends_at: '',
});

const closeButtonRef = ref(null);

const hide = () => emit('hide');

const confirm = () => {
  console.log('confirm');
};

Dialog(Modal) code:

<TransitionRoot as="template" :show="show">
    <Dialog @close="hide()"
            :initial-focus="closeButtonRef"
            as="div"
            class="fixed inset-0 z-10 overflow-hidden">
      <div class="absolute inset-0 overflow-hidden">
        <TransitionChild as="template"
                         enter="ease-in-out duration-300"
                         enter-from="opacity-0"
                         enter-to="opacity-100"
                         leave="ease-in-out duration-300"
                         leave-from="opacity-100"
                         leave-to="opacity-0">
          <DialogOverlay class="absolute inset-0 bg-black bg-opacity-70 transition-opacity" />
        </TransitionChild>

        <div class="fixed inset-y-0 right-0 max-w-full flex">
          <TransitionChild as="template"
                           enter="transform transition ease-in-out duration-300"
                           enter-from="translate-x-full"
                           enter-to="translate-x-0"
                           leave="transform transition ease-in-out duration-300"
                           leave-from="translate-x-0"
                           leave-to="translate-x-full">
            <div class="panel-width">
              <div class="h-full flex flex-col bg-white shadow-xl">
                <div class="min-h-0 flex-1 pb-12 flex flex-col gap-y-4 overflow-y-scroll">
                  <!-- Header -->
                  <div class="p-6 bg-gray-50">
                    <div class="flex items-start justify-between">

                      <!-- Title -->
                      <DialogTitle class="text-lg text-gray-900">
                        Create Skill Training
                      </DialogTitle>

                      <!-- Close Button -->
                      <div class="ml-3 h-7 flex items-center">
                        <button ref="closeButtonRef"
                                @click="hide()"
                                type="button"
                                class="rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                          <span class="sr-only">Close panel</span>
                          <XIcon class="h-6 w-6" aria-hidden="true" />
                        </button>
                      </div>
                    </div>
                  </div>

                  <!-- Content -->
                  <div class="mt-6 relative flex-1">
                    <form id="send-for-training-form" @submit.prevent="confirm()">
                      <section class="py-2 px-6 relative border border-red-500">

                        <!-- DATE PICKER HERE -->
                        <Datepicker v-model="form.starts_at" />

                      </section>
                    </form>
                  </div>
                </div>

                <!-- Footer -->
                <div class="flex flex-shrink-0 border-t border-gray-200 px-6 py-5">
                  <PrimaryButton type="submit" class="ml-auto">
                    Send For Training
                  </PrimaryButton>
                </div>
              </div>
            </div>
          </TransitionChild>
        </div>
      </div>
    </Dialog>
  </TransitionRoot>

[Jasenkoo]

Great, version 3.2 will include some adjustments where you wouldn’t need to change the teleport target or add initial focus

[Jasenkoo]

@donmb1 Will take a look