fix: Popup - Remove document listeners on unmount

- drop pointerdown/pointerup/keydown capture listeners so remounts do not keep closing menus
- render Gallery slides as img elements instead of CSS background-image

Author: apostololeg

src/components/Gallery/Gallery.styl

@@ -54,18 +54,25 @@
   display flex
   align-items center
   justify-content center
-  background-size contain
-  background-position center
-  background-repeat no-repeat
   width calc(100% / 3)
+  position relative
 
-  .cover &
-    background-size cover
+.image
+  max-width 100%
+  max-height 100%
+  width auto
+  height auto
+  object-fit contain
+  opacity 0
+  transition opacity .15s ease-out
 
-  & > img
-    opacity 0
-    position absolute
-    pointer-events none
+  &.imageLoaded
+    opacity 1
+
+  .cover &
+    width 100%
+    height 100%
+    object-fit cover
 
 .brokenImage
   height 50%

src/components/Gallery/Gallery.tsx

@@ -1,7 +1,6 @@
 import {
   Component,
   createRef,
-  CSSProperties,
   useEffect,
   useLayoutEffect,
   useRef,
@@ -116,7 +115,6 @@ function Item({
 }) {
   const [loaded, setLoaded] = useState(false);
   const [isError, setIsError] = useState(false);
-  const style = {} as CSSProperties;
   const imgRef = useRef<HTMLImageElement | null>(null);
 
   useLayoutEffect(() => {
@@ -166,24 +164,24 @@ function Item({
     return <VideoItem src={src} size={size} isActive={isActive} />;
   }
 
-  if (loaded) style.backgroundImage = `url(${src})`;
-
   return (
-    <div className={S.item} style={style}>
-      {!loaded &&
-        (isError ? (
-          <Icon type="brokenImage" className={S.brokenImage} />
-        ) : (
-          <>
-            <img
-              ref={imgRef}
-              src={src}
-              onLoad={() => setLoaded(true)}
-              onError={() => setIsError(true)}
-            />
-            <Spinner size={size} />
-          </>
-        ))}
+    <div className={S.item}>
+      {isError ? (
+        <Icon type="brokenImage" className={S.brokenImage} />
+      ) : (
+        <>
+          <img
+            ref={imgRef}
+            src={src}
+            alt=""
+            className={cn(S.image, loaded && S.imageLoaded)}
+            draggable={false}
+            onLoad={() => setLoaded(true)}
+            onError={() => setIsError(true)}
+          />
+          {!loaded && <Spinner size={size} />}
+        </>
+      )}
     </div>
   );
 }

src/components/Popup/Popup.tsx

@@ -166,6 +166,11 @@ export class Popup extends Component<T.Props, T.State> {
       vv.removeEventListener('scroll', this.onBoundaryGeometryChange);
     }
 
+    // These are registered in componentDidMount; omitting removal left orphaned
+    // capture listeners that kept calling close/onClose after portal remounts.
+    document.removeEventListener('pointerdown', this.onDocPointerDown, true);
+    document.removeEventListener('pointerup', this.onDocPointerUp, true);
+    document.removeEventListener('keydown', this.onDocKeyDown, true);
     document.removeEventListener('keyup', this.onDocKeyUp);
 
     if (this.scrollParent) {
@@ -289,12 +294,7 @@ export class Popup extends Component<T.Props, T.State> {
     const availWidth = H.edgesWidth(bounds);
     const fitWidth =
       availWidth >= BOUNDARY_FIT_EPSILON ? Math.floor(availWidth) : null;
-    const measured = this.measureBoundaryRect(
-      el,
-      wrapper,
-      fitWidth,
-      bounds
-    );
+    const measured = this.measureBoundaryRect(el, wrapper, fitWidth, bounds);
 
     this.setBoundaryFit(
       H.fitRectToBoundary(measured.rect, bounds, measured.maxWidth)
@@ -455,8 +455,7 @@ export class Popup extends Component<T.Props, T.State> {
     this.focused = true;
     this.props.triggerProps?.onFocus?.(e);
 
-    if (!this.pointerPressed && !this.state.isOpen)
-      this.open();
+    if (!this.pointerPressed && !this.state.isOpen) this.open();
   };
 
   onBlur = e => {