Akryum / floating-vue

đŸ’¬ Easy tooltips, popovers, dropdown, menus... for Vue

Home Page:https://floating-vue.starpad.dev/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

@click not fired in elements inside a v-close-popper

afv opened this issue · comments

Hello,

Between 5.1.0 and 5.1.1 the @click in elements inside a v-close-popper stopped working (expectation: click works and the popper closes): https://codesandbox.io/p/sandbox/floating-vue-click-5m6mm6

Is it supposed to work like this?

Thanks!

Edit: @kouts @mousedown works.

Linked example:

<template>
  <div class="main">
    <VDropdown>
      <button>Open popper</button>
      <template #popper>
        <div v-close-popper>
          <div>1) Close on click OK</div>
          <div @click="doSomething">2) @click (stopped working on 5.1.1)</div>
          <div @mousedown="doSomething">3) @mousedown (works)</div>
        </div>
      </template>
    </VDropdown>

    <br /><br /><br /><br />
    {{ list }}
  </div>
</template>

<script setup>
import { ref } from "vue";

const list = ref([]);

function doSomething() {
  list.value.push(new Date());
}
</script>

I am experiencing the same issue, this problem already existed on the v2.0.0-beta.24 version on Mobile but now it's also a problem on desktop.

This is a workaround for VDropdown:

  <VDropdown ref="myDropdown">
      <a class="btn btn-secondary" href="javascript: void(0)">
          More <i class="mdi mdi-chevron-down"></i>
      </a>

      <template #popper>
          <ul>
              <li
                  @click="doSomething(); $refs.myDropdown.hide()">
                  <span><i class="mdi mdi-file-document-outline"></i> View file</span>
              </li>
          </ul>
      </template>
  </VDropdown>

I think this is because the event has changed to mousedown on v5.1, @afv can you try @mousedown="doSomething"?

I think this is because the event has changed to mousedown on v5.1, @ afv can you try @mousedown="doSomething"?

This is a easier /quicker solution. Would still like to see the v-close-popper fixed with @click.

Yeah, I certainly wasn't expecting a breaking change from a point release!

I'm also not sure why the change from click to mousedown maybe @Akryum can shed some light

Hmmm yes it looks like it's breaking things so it will be reverted

Hi @Akryum, thanks for reverting it, but now the v-close-popper does nothing?

https://codesandbox.io/p/sandbox/floating-vue-click-forked-mk7fwp?file=%2Fsrc%2FApp.vue

Edit: fixed in 94a0ea3