From 7eb30447d8b81a9292c34d1af7361e252c7052c0 Mon Sep 17 00:00:00 2001
From: automated-signal <37887102+automated-signal@users.noreply.github.com>
Date: Mon, 21 Jul 2025 12:49:57 -0500
Subject: [PATCH] Fix space key opening lightbox on image reactions

Co-authored-by: Jamie Kyle <113370520+jamiebuilds-signal@users.noreply.github.com>
---
 ts/components/fun/base/FunPopover.tsx | 32 +++++++++++++++++----------
 1 file changed, 20 insertions(+), 12 deletions(-)

diff --git a/ts/components/fun/base/FunPopover.tsx b/ts/components/fun/base/FunPopover.tsx
index a3d6f7fdb1..9a454bf1c6 100644
--- a/ts/components/fun/base/FunPopover.tsx
+++ b/ts/components/fun/base/FunPopover.tsx
@@ -1,6 +1,6 @@
 // Copyright 2025 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
-import type { ReactNode } from 'react';
+import type { KeyboardEvent, ReactNode } from 'react';
 import React, { useCallback } from 'react';
 import type { Placement } from 'react-aria';
 import { Dialog, Popover } from 'react-aria-components';
@@ -33,19 +33,27 @@ export function FunPopover(props: FunPopoverProps): JSX.Element {
     []
   );
 
+  const handleKeyDown = useCallback((event: KeyboardEvent) => {
+    event.stopPropagation();
+  }, []);
+
   return (
     <Tooltip.Provider>
-      <Popover
-        data-fun-overlay
-        className={classNames('FunPopover', {
-          'light-theme': props.theme === ThemeType.light,
-          'dark-theme': props.theme === ThemeType.dark,
-        })}
-        placement={props.placement}
-        shouldCloseOnInteractOutside={shouldCloseOnInteractOutside}
-      >
-        <Dialog className="FunPopover__Dialog">{props.children}</Dialog>
-      </Popover>
+      {/* Prevents keyboard events from bubbling up outside of the popover */}
+      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+      <div onKeyDown={handleKeyDown}>
+        <Popover
+          data-fun-overlay
+          className={classNames('FunPopover', {
+            'light-theme': props.theme === ThemeType.light,
+            'dark-theme': props.theme === ThemeType.dark,
+          })}
+          placement={props.placement}
+          shouldCloseOnInteractOutside={shouldCloseOnInteractOutside}
+        >
+          <Dialog className="FunPopover__Dialog">{props.children}</Dialog>
+        </Popover>
+      </div>
     </Tooltip.Provider>
   );
 }