Sidebar Mask not being removed from DOM on close

[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,
});

Originally posted by @craigrileyuk in #329 (comment)

[cagataycivici]

I've replicated it by adding a router link inside a sidebar, when the route changes, mask stays stuck.