Add ability to conditionally render Popper

babel.config.js

@@ -1,16 +1,13 @@
-const devPresets = ['@vue/babel-preset-app'];
+const devPresets = ["@vue/babel-preset-app"];
 const buildPresets = [
   [
-    '@babel/preset-env',
+    "@babel/preset-env",
     // Config for @babel/preset-env
     {
-      // Example: Always transpile optional chaining/nullish coalescing
-      // include: [
-      //   /(optional-chaining|nullish-coalescing)/
-      // ],
+      include: [/(optional-chaining|nullish-coalescing)/],
     },
   ],
 ];
 module.exports = {
-  presets: (process.env.NODE_ENV === 'development' ? devPresets : buildPresets),
+  presets: process.env.NODE_ENV === "development" ? devPresets : buildPresets,
 };

src/component/Popper.vue

@@ -15,8 +15,8 @@
     </div>
     <Transition name="fade">
       <div
-        v-if="isOpen"
-        :class="['popper', isOpen ? 'inline-block' : null]"
+        v-show="showPopper"
+        :class="['popper', showPopper ? 'inline-block' : null]"
         ref="popperNode"
       >
         <!-- A slot for the popper content -->
@@ -28,7 +28,7 @@
 </template>
 
 <script>
-  import { defineComponent, toRefs } from "vue";
+  import { computed, defineComponent, toRefs } from "vue";
   import usePopper from "@/composables";
   import clickAway from "@/directives";
 
@@ -131,13 +131,18 @@
         close,
       } = usePopper({ offsetX, offsetY, arrowPadding, placement, emit });
 
+      const showPopper = computed(() => {
+        return isOpen.value && slots.content?.().length;
+      });
+
       return {
         popperNode,
         triggerNode,
         isOpen,
         toggle,
         open,
         close,
+        showPopper,
       };
     },
   });