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

[betaSavvy]

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]

I am aware of the issue with HeadlessUI, will check what is happening. Are you on the latest version of the Datepicker?

[betaSavvy]

@Jasenkoo Yes, v3.1.1. For now, My temporary solution is to use teleport but the problem is, the menu will appear off screen so I have to use alt-position to reposition it. I have 3 of them on the modal and it's very hacky.

[Jasenkoo]

@betaSavvy Tried to reproduce it with your example, however, without success, the modal is displayed like a sidebar, and the clicking is working fine.

Your behavior might be happening because of the 2 teleports, one from the Dialog, and one from the datepicker. Can you set the id on the Dialog and then set the teleport target on the Datepicker like teleport="#your_id". Check this comment for more info.

Let me know if that works. Also, are you maybe using a fork of the repo?

[betaSavvy]

@Jasenkoo I have tried your suggestion to set an id on Dialog but it doesn't work due to headless ui overwriting that id, so I place the id on the first child element of Dialog like this

<Dialog @close="hide()"
            as="div"
            class="fixed inset-0 z-10 overflow-hidden">
      <div id="container" class="absolute inset-0 overflow-hidden"> <!--- ID PLACE HERE FOR TELEPORT -->

AND IT WORKS! (and it positions the picker menu correctly too so I no longer needs to do alt position)

Thanks alot!

[Jasenkoo]

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

[donmb1]

@Jasenkoo the same problem happens with Vuetify dialogs. When inside a dialog and clicking on anything in the Datepicker, it closes the dialog. How to fix this?

[Jasenkoo]

@donmb1 What version are you using? Can you try setting the teleport target to modal id?

[henryfool91]

Same problem in Quasar popups (menu component, or pop-up proxy), https://codesandbox.io/s/withered-butterfly-72zfqp?file=/src/pages/Index.vue

--
BTW Thanks for such a great component, it is the best DateTime component for vue!

[donmb1]

@Jasenkoo Vuetify 3.0.0-beta.5, datepicker 3.3.0
The teleport did not work.

[Jasenkoo]

@donmb1 Will take a look

[SvetlozarValchev]

@Jasenkoo Vuetify 3.0.0-beta.5, datepicker 3.3.0 The teleport did not work.

I'm on Vuetify 3.5.3 and @vuepic/vue-datepicker 6.1.0 and this is still an issue. Setting the teleport to dialog id doesn't work. @Jasenkoo

[borisgraeff-pxo]

@SvetlozarValchev I was facing the same issue (vuetify modal + teleport)
It seems that adding :config="{allowPreventDefault: true}" fixes the issue (at least with vuetify 3.4.10 / vue-datepicker 8.1.1)

[brantchev]

@borisgraeff-pxo Thank you for the great input. Works like a charm (using it within Quasar dialogs, menus, ets..)!