Akryum / floating-vue

💬 Easy tooltips, popovers, dropdown, menus... for Vue
https://floating-vue.starpad.dev/
MIT License
3.26k stars 333 forks source link

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

Closed afv closed 6 months ago

afv commented 6 months ago

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>
RoyvanEmpel commented 6 months ago

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.

RoyvanEmpel commented 6 months ago

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>
kouts commented 6 months ago

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

RoyvanEmpel commented 6 months ago

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.

bmulholland commented 6 months ago

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

kouts commented 6 months ago

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

Akryum commented 6 months ago

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

afv commented 6 months ago

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 https://github.com/Akryum/floating-vue/commit/94a0ea34ce924cd3bda31ef9624781264c0138eb