fix: v-close-popper directive, #1022

Author: Akryum

docs/.vitepress/components/DropdownCloseDirectiveDemo.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="example flex justify-center">
+    <VDropdown>
+      <button class="border border-gray-500 rounded px-4 py-2">
+        Click me
+      </button>
+
+      <template #popper>
+        <div class="p-6 flex gap-2">
+          <button class="underline cursor-pointer">Other button</button>
+          <button v-close-popper class="underline cursor-pointer">Close</button>
+        </div>
+      </template>
+    </VDropdown>
+  </div>
+</template>

docs/components.d.ts

@@ -8,9 +8,11 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     ArrowPadding: typeof import('./.vitepress/components/ArrowPadding.vue')['default']
+    DropdownCloseDirectiveDemo: typeof import('./.vitepress/components/DropdownCloseDirectiveDemo.vue')['default']
     DropdownMobileDemo: typeof import('./.vitepress/components/DropdownMobileDemo.vue')['default']
     DropdownPlacement: typeof import('./.vitepress/components/DropdownPlacement.vue')['default']
     DropdownSimpleExample: typeof import('./.vitepress/components/DropdownSimpleExample.vue')['default']
+    DropdownVClodePopperDemo: typeof import('./.vitepress/components/DropdownVClodePopperDemo.vue')['default']
     MenuSimpleExample: typeof import('./.vitepress/components/MenuSimpleExample.vue')['default']
     OffsetExample: typeof import('./.vitepress/components/OffsetExample.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

docs/guide/component.md

@@ -218,7 +218,7 @@ Use the `hide` slot prop to close the popper:
   <button>Click me</button>
 
   <template #popper="{ hide }">
-    <a @click="hide()">Close</a>
+    <button @click="hide()">Close</button>
   </template>
 </VDropdown>
 ```
@@ -232,24 +232,26 @@ Use the `v-close-popper` directive on an element inside the dropdown to close it
   <button>Click me</button>
 
   <template #popper>
-    <a v-close-popper>Close</a>
+    <button v-close-popper>Close</button>
   </template>
 </VDropdown>
 ```
 
+<DropdownCloseDirectiveDemo />
+
 The directive works even in nested components in the `popper` slot.
 
 You can also set it to true or false to enable or disable the directive (enabled by default):
 
 ```html
-<a v-close-popper="false">Close</a>
-<a v-close-popper="true">Close</a>
+<button v-close-popper="false">Close</button>
+<button v-close-popper="true">Close</button>
 ```
 
 You can also use a property:
 
 ```html
-<a v-close-popper="myBooleanProp">Close</a>
+<button v-close-popper="myBooleanProp">Close</button>
 ```
 
 ```js

packages/floating-vue/src/directives/v-close-popper.ts

@@ -1,7 +1,8 @@
 import { supportsPassive } from '../util/env'
 
 function addListeners (el) {
-  el.addEventListener('mousedown', onMouseDown)
+  el.addEventListener('mousedown', addEventProps)
+  el.addEventListener('click', addEventProps)
   el.addEventListener('touchstart', onTouchStart, supportsPassive
     ? {
       passive: true,
@@ -10,13 +11,14 @@ function addListeners (el) {
 }
 
 function removeListeners (el) {
-  el.removeEventListener('mousedown', onMouseDown)
+  el.removeEventListener('mousedown', addEventProps)
+  el.removeEventListener('click', addEventProps)
   el.removeEventListener('touchstart', onTouchStart)
   el.removeEventListener('touchend', onTouchEnd)
   el.removeEventListener('touchcancel', onTouchCancel)
 }
 
-function onMouseDown (event) {
+function addEventProps (event) {
   const el = event.currentTarget
   event.closePopover = !el.$_vclosepopover_touch
   event.closeAllPopover = el.$_closePopoverModifiers && !!el.$_closePopoverModifiers.all