feat: preventDefault option

packages/docs/src/api/README.md

@@ -428,6 +428,14 @@ Boolean: prevent the popper from overflowing the `boundary`.
 <VDropdown :prevent-overflow="false" />
 ```
 
+### `preventDefault`
+
+Boolean: prevent default event when click on outside elements.
+
+```vue
+<VDropdown :prevent-default="true" />
+```
+
 ### `overflowPadding`
 
 Virtual padding in the `boundary` used to prevent the popper overflow (pixels).

packages/docs/src/guide/config.md

@@ -52,6 +52,8 @@ export const config: FloatingVueConfig = {
   strategy: 'absolute',
   // Prevent overflow
   preventOverflow: true,
+  // Prevent default event when click on outside elements
+  preventDefault: false,
   // Flip to the opposite placement if needed
   flip: true,
   // Shift on the cross axis to prevent the popper from overflowing

packages/floating-vue/src/components/Popper.ts

@@ -266,6 +266,11 @@ export default () => defineComponent({
       type: Boolean,
       default: defaultPropFactory('noAutoFocus'),
     },
+
+    preventDefault: {
+      type: Boolean,
+      default: defaultPropFactory('preventDefault'),
+    },
   },
 
   emits: [
@@ -335,6 +340,7 @@ export default () => defineComponent({
         },
         result: this.positioningDisabled ? null : this.result,
         attrs: this.$attrs,
+        preventDefault: this.preventDefault,
       }
     },
 

packages/floating-vue/src/components/PopperMask.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="v-popper__mask"></div>
+</template>
+
+
+<style>
+.v-popper__mask {
+  position: fixed;
+  z-index: 9999;
+  top: 0;
+  left: 0;
+  bottom:0;
+  right: 0;
+}
+</style>

packages/floating-vue/src/components/PopperWrapper.vue

@@ -13,6 +13,7 @@
       onResize,
       classes,
       result,
+      preventDefault,
     }"
     :theme="finalTheme"
     :target-nodes="getTargetNodes"
@@ -47,13 +48,16 @@
         :hide="hide"
       />
     </PopperContent>
+
+    <PopperMask v-if="isShown && preventDefault"/>
   </Popper>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
 import Popper from './Popper.vue'
 import PopperContent from './PopperContent.vue'
+import PopperMask from './PopperMask.vue'
 import PopperMethods from './PopperMethods'
 import ThemeClass from './ThemeClass'
 
@@ -63,6 +67,7 @@ export default defineComponent({
   components: {
     Popper,
     PopperContent,
+    PopperMask,
   },
 
   mixins: [

packages/floating-vue/src/config.ts

@@ -21,6 +21,8 @@ export const config: FloatingVueConfig = {
   strategy: 'absolute',
   // Prevent overflow
   preventOverflow: true,
+  // Prevent default event when click on outside elements
+  preventDefault: false,
   // Flip to the opposite placement if needed
   flip: true,
   // Shift on the cross axis to prevent the popper from overflowing