Close modal on click outside modal content frame

[den-kar]

Is it possible to close the modal on a click outside the div with class name "cookieControl__ModalContent" (CookieControl.vue line 52) or "cookieControl__ModalContentInner" (CookieControl.vue line 53)?

In app.vue I already tried to add the onClickOutside function from @vueuse/nuxt in conjunction with a ref on the CookieControl component.

<script setup lang="ts">
import { MaybeElement } from '@vueuse/core';

const { isModalActive } = useCookieControl();

const cookieControlRef = ref<MaybeElement>(null);

// close modal on click outside content frame
onClickOutside(cookieControlRef, () => {
  isModalActive = false;
});

// close modal on keystroke 'Escape'
onKeyStroke('Escape', () => {
  if (isModalActive.value)
    isModalActive.value = false;
});
</script>

<template>
  <NuxtLayout />
  <CookieControl locale="en" ref="cookieControlRef">
</template>

With this setup, if the modal is opened, every click closes it, even if the click is inside the modals content div.

Do you have a hint for a proper solution?

This feature might be interesting for others as well. The most convenient solution for users might be an additional module option like closeModalOnClickOutside

[dargmuesli]

Hey @den-kar, thank you for the great suggestion! I'd recommend to take inspiration from https://vueuse.org/core/onClickOutside/. Not meaning we should include the library per se, only if it would not make sense to implement it in this module, but the code behind it surely shows a possible solution. I would definitely merge a PR for this feature!

[den-kar]

Hey @dargmuesli, I found a simple solution without the need of vueuse and just made PR #86