[BUG] SfGallery mouse events return errors when leaving page (seen in Shopware PWA)

[bitfactory-frank-spee]

Describe the bug
When I mouse over the stage image of the gallery with zoom option true, after clicking the breadcrumbs in Shopware PWA I get this error for example:

client.js?06a0:102 TypeError: Cannot read properties of undefined (reading '$el')
    at VueComponent.removeZoom (SfGallery.vue?f499:306:1)
    at mouseout (SfGallery.vue?dfd6:35:1)

How to reproduce

1. Go to a page with a SfGallery component with enableZoom on true with a stage with an image and a link close by (like breadcrumb on top of the page and the stage directly under it)
2. Click on the link to route to another page (without an sfgallery)
3. Directly after clicking move your mouse over the stage
4. Trigger the error (check the console)

Expected behavior
I expect them to fail silently / do nothing, there is no need to do anything when the stage is empty.

Actual behavior
Actually all zoom event handlers (positionObject, moveZoom and removeZoom) can trigger an error because there is no check if this.$refs.sfGalleryBigImage actually has more then 0 items in it. And apparently it looks like when Vue unmounts the page the slots also dissappear. I am not sure what happens. But I do know that the refs are no longer there. The array of this.$refs.sfGalleryBigImage is empty. Therefor I suggest doing these fixes, which I have tested already.

Code examples
Shopware PWA 1.5.3 with Storefront UI 0.13.3

I can't share any of the code, but it should be possible to do this with the boilerplate code of Shopware PWA. I also checked the updates of Shopware PWA 1.6.1 and Storefront UI 0.13.6, I can't see any fixes in the commits for this.

I can share the way I fixed it and tested it succesfully locally. Below are the 3 fixes.

Added ?.length > 0 to check in positionObject:

    positionObject(index) {
      if (this.$refs.sfGalleryBigImage?.length > 0) {
        if (this.outsideZoom) {
          return this.$refs.glide.getBoundingClientRect();
        } else {
          return this.$refs.sfGalleryBigImage[
            index
          ].$el.getBoundingClientRect();
        }
      }
      return "";
    },

Added if (this.$refs.sfGalleryBigImage?.length > 0) to else in moveZoom:

    moveZoom($event, index) {
      if (this.enableZoom) {
        this.eventHover = $event;
        if (this.outsideZoom) {
          this.positionStatic = this.positionObject(index);
          this.$refs.outSide.style.cssText = `position: absolute; left: ${
            $event.clientX - this.positionStatic.x
          }px; top: ${$event.clientY - this.positionStatic.y}px; z-index: 1;`;
          this.$refs.imgZoom.$el.children[0].style.cssText = `transform: scale(2); width: 300px; height: auto;`;
          this.$refs.imgZoom.$el.children[0].style.transformOrigin = `${
            $event.clientX - this.positionStatic.x
          }px ${$event.clientY - this.positionStatic.y}px`;
        } else if (this.$refs.sfGalleryBigImage?.length > 0) {
          this.positionStatic = this.positionObject(index);
          this.$refs.sfGalleryBigImage[index].$el.children[0].style.cssText =
            "top: 0; transform: scale(2);";
          this.$refs.sfGalleryBigImage[
            index
          ].$el.children[0].style.transformOrigin = `${
            $event.clientX - this.positionStatic.x
          }px ${$event.clientY - this.positionStatic.y}px`;
        }
      }
    },

And added || this.$refs.sfGalleryBigImage?.length === 0 to return if in removeZoom:

removeZoom(index) {
      if (this.enableZoom) {
        this.isZoomStarted = false;
        if (this.outsideZoom || this.$refs.sfGalleryBigImage?.length === 0) return;
        this.$refs.sfGalleryBigImage[index].$el.children[0].style.transform =
          "scale(1)";
      }
    },

Devices (please complete the following information):

• Device: MacBook Pro
• OS: MacOS Ventura 13.2.1
• Browser: Chrome

Additional context
Nuxt, Docker, without SSR on, or with SSR on