Fix space key opening lightbox on image reactions

Co-authored-by: Jamie Kyle <113370520+jamiebuilds-signal@users.noreply.github.com>
This commit is contained in:
automated-signal 2025-07-21 12:49:57 -05:00 committed by GitHub
parent 44da91ec9f
commit 7eb30447d8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -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>
);
}