SideBar p-sidebar-mask div is not removed automatically

[canbax]

I'm a bit new to VueJs, so I don't know if it is on me but my case is very simple.

I'm using SideBar.

Code for my template is below.

<template>
  <div >
    <div>
      My App
      <Sidebar :visible.sync="visibleLeft">Content</Sidebar>
      <Button icon="pi pi-arrow-right" @click="visibleLeft = !visibleLeft" />
    </div>
    <div>asd asd ada sdasd</div>
  </div>
</template>

You can see that the mask (a div element with class p-sidebar-mask) is added to DOM but it is not removed

[cagataycivici]

What is your PrimeVue version?

[canbax]

it was "primevue": "^2.0.0-beta.1" it magically starts working. Maybe restarting computer helped.

[tiedeio]

I have the same Problem and a restart doesn't fixed it. My PrimeVue Version is: "version": "2.0.0-rc.1",

[cagataycivici]

Are you able to replicate it at live demo?

https://primefaces.org/primevue/showcase/#/sidebar

That would help.

[tiedeio]

I just get the bug if I use primevue over the script-tags. If I used it via the import mechanism (recommend) it works as expected. This ticket can be closed.

[craigrileyuk]

I'm getting this issue now too:

    "devDependencies": {
        "@vue/compiler-sfc": "^3.0.5",
        "laravel-mix": "^6.0.10",
        "postcss": "^8.2.4",
        "resolve-url-loader": "^3.1.0",
        "sass": "^1.32.4",
        "sass-loader": "^8.0.2",
        "vue": "^3.0.5",
        "vue-loader": "^16.1.2"
    },
    "dependencies": {
        "laravel-mix-alias": "^1.0.2",
        "mqpacker": "^7.0.0",
        "primeicons": "^4.1.0",
        "primevue": "^3.1.2"
    }

It seems to be related to the disableModality method inside the Sidebar component. The callback to remove the mask is attached to an event listener for transitionend on the mask element. However, while the mask fires a transitionend event when it opens (for the transform property), on my project, it doesn't fire one when it's closed, therefore the callback to remove the mask is never executed.

<template>
      <PrimeSidebar v-model:visible="navigation.showSidebar">
          Content
      </PrimeSidebar>
  </template>
  
  <script>
  import PrimeSidebar from "primevue/sidebar";
  import navigation from "@/store/navigation";
  
  export default {
      setup() {
          return {
              PrimeSidebar,
              navigation,
          };
      },
  };
  </script>

/*
* store/navigation.js
*/

import { reactive } from "vue";

export default reactive({
  showSidebar: false,
});

[Aterr]

Was this fixed ?
I have the same issue with 3.8.2

[zeamedia]

I have still the same error using primevue 3.7.2
It seams the issue is not fixed.
Now I had a look at all linked issues: adding some css classes fix it at mentioned here: #1541 (comment)

[cbutler90]

Having same issue, on same version as mentioned by zeamedia. Added CSS classes to fix for now, but this should be resolved at some point