[Modal] Prevent close

[paulvonber]

Is there a way (at least not in the docs) to prevent modal close on "esc" or clicking on overlay, if not could be quite nice to have such an options.

[benjamincanac]

I've been looking for this too but it seems the Dialog component from Headless UI does not support it, there is an issue about this: tailwindlabs/headlessui#621

[BayBreezy]

@benjamincanac One trick I like to use in reusable Dialogs from headlessui is to pass in a prop called forceClose and set it to false by default.
The for the @close event on the dialog, I do something like this @close="!forceClose && (isOpen = false)"
This way, the user can pass the forceClose to the dialog comp & it will not close on ESC or outside click.

The component looks something like this( The H prefix is because I use the Nuxt-headlessui module with the prefix set to H in my nuxt.config)

<template>
  <HTransitionRoot as="div" appear :show="isOpen">
    <HDialog as="div" class="relative z-50" @close="!forceClose && (isOpen = false)">
      <HTransitionChild
        as="template"
        enter="duration-300 ease-out"
        enter-from="opacity-0"
        leave-to="opacity-0"
        leave="duration-200 ease-in"
      >
        <div :class="overlayStyle" aria-hidden="true"></div>
      </HTransitionChild>

      <!-- Make container scrollable -->
      <div class="fixed inset-0 overflow-y-auto">
        <div class="flex min-h-full items-center justify-center">
          <HTransitionChild as="template" v-bind="transitionClass">
            <HDialogPanel>
              <slot></slot>
            </HDialogPanel>
          </HTransitionChild>
        </div>
      </div>
    </HDialog>
  </HTransitionRoot>
</template>

<script setup lang="ts">
  const props = withDefaults(
    defineProps<{
      /**
       * Control the state of the modal
       */
      modelValue?: boolean;
      /**
       * Styles to be applied ot overlay
       */
      overlayStyle?: string;
      /**
       * Disable closing with ESC key & outsideclick
       */
      forceClose?: boolean;
      /**
       * Transition styles
       */
      transition?: {
        appear?: boolean;
        enter?: string;
        enterFrom?: string;
        enterTo?: string;
        entered?: string;
        leave?: string;
        leaveFrom?: string;
        leaveTo?: string;
      };
    }>(),
    {
      overlayStyle: "fixed inset-0 bg-background/50 backdrop-blur",
      transition: () => ({}),
    }
  );

  const transitionClass = computed(() => {
    return {
      appear: true,
      enter: "duration-300 ease-out",
      enterFrom: "opacity-0 scale-75",
      leaveTo: "opacity-0 scale-95",
      leave: "duration-200 ease-in",
      ...props.transition,
    };
  });

  const emits = defineEmits(["update:modelValue"]);

  const isOpen = computed({
    get() {
      return props.modelValue;
    },
    set(value) {
      emits("update:modelValue", value);
    },
  });
</script>

[ElYaiko]

Any update please?