Merge pull request #855 from oslokommune/no-outside-click-close

Disable closing modals and drawers by outside click

CHANGELOG.md

@@ -13,6 +13,8 @@ All notable changes to this project will be documented in this file. The format
 - Organization, department and product details are now edited from within the
   current item's about page.
 - Made links clickable in the description of objects, key results and goals.
+- It is no longer possible to close open modals or drawers by clicking outside
+  them. This is meant to prevent accidental data loss in unsaved forms.
 
 ## [3.9.0] 2023-09-01
 

src/components/drawers/SliderContainer.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <transition name="fade" mode="out-in">
-      <div v-if="visible" class="overlay" @click.self="close"></div>
+      <div v-if="visible" class="overlay"></div>
     </transition>
     <transition name="slide" @after-leave="$emit('hidden')">
       <aside v-if="visible" class="sliderContainer">

src/components/modals/ModalWrapper.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="modalOverlay" class="overlay" @keydown.esc="close" @click.self="close">
+  <div ref="modalOverlay" class="overlay" @keydown.esc="close">
     <div :class="['modal', `modal--${variant}`]">
       <div class="modal__header">
         <h1 class="pkt-txt-18-medium">