Remove pointer-events: none from Reka UI (#129)

Author: pascalbaljet

vue/src/Modal.vue

@@ -3,7 +3,7 @@ import { DialogOverlay, DialogPortal, DialogRoot } from 'reka-ui'
 import ModalContent from './ModalContent.vue'
 import HeadlessModal from './HeadlessModal.vue'
 import SlideoverContent from './SlideoverContent.vue'
-import { ref } from 'vue'
+import { onBeforeMount, onUnmounted, ref } from 'vue'
 
 const modal = ref(null)
 const rendered = ref(false)
@@ -41,6 +41,26 @@ defineExpose({
         return modal.value?.shouldRender
     },
 })
+
+let observer
+
+onBeforeMount(() => {
+    // Workaround for: https://github.com/unovue/reka-ui/issues/1540
+    observer = new MutationObserver(() => {
+        if (document.body.style.pointerEvents === 'none') {
+            document.body.style.pointerEvents = ''
+        }
+    })
+
+    observer.observe(document.body, { attributes: true, attributeFilter: ['style'] })
+})
+
+onUnmounted(() => {
+    if (observer) {
+        observer.disconnect()
+        observer = null
+    }
+})
 </script>
 
 <template>