Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
afv opened this issue Jan 19, 2024 · 8 comments
Closed

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

afv opened this issue Jan 19, 2024 · 8 comments

Comments

@afv
Copy link

afv commented Jan 19, 2024

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
Copy link

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
Copy link

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
Copy link
Contributor

kouts commented Jan 22, 2024

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

@RoyvanEmpel
Copy link

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
Copy link

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

@kouts
Copy link
Contributor

kouts commented Jan 24, 2024

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

@Akryum
Copy link
Owner

Akryum commented Jan 24, 2024

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

@Akryum Akryum closed this as completed in b5dc40c Jan 29, 2024
@afv
Copy link
Author

afv commented Jan 29, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants