diff --git a/stylesheets/components/NavSidebar.scss b/stylesheets/components/NavSidebar.scss index a6d8b3f2c..5d289a9ae 100644 --- a/stylesheets/components/NavSidebar.scss +++ b/stylesheets/components/NavSidebar.scss @@ -195,6 +195,15 @@ } } + &:active { + @include light-theme { + background: $color-gray-20; + } + @include dark-theme { + background: $color-gray-62; + } + } + &:focus { outline: none; @include keyboard-mode { diff --git a/ts/components/CallsTab.tsx b/ts/components/CallsTab.tsx index 861606dab..998768bfc 100644 --- a/ts/components/CallsTab.tsx +++ b/ts/components/CallsTab.tsx @@ -207,10 +207,11 @@ export function CallsTab({ }} portalToRoot > - {({ openMenu, onKeyDown }) => { + {({ onClick, onKeyDown, ref }) => { return ( } label={i18n('icu:CallsTab__MoreActionsLabel')} diff --git a/ts/components/ContextMenu.tsx b/ts/components/ContextMenu.tsx index 2f072f496..dddf4da4f 100644 --- a/ts/components/ContextMenu.tsx +++ b/ts/components/ContextMenu.tsx @@ -25,7 +25,7 @@ export type ContextMenuOptionType = Readonly<{ }>; type RenderButtonProps = Readonly<{ - openMenu: (ev: React.MouseEvent) => void; + onClick: (ev: React.MouseEvent) => void; onKeyDown: (ev: KeyboardEvent) => void; isMenuShowing: boolean; ref: React.Ref | null; @@ -207,10 +207,15 @@ export function ContextMenu({ }; const handleClick = (ev: React.MouseEvent) => { - closeCurrentOpenContextMenu?.(); - closeCurrentOpenContextMenu = () => setIsMenuShowing(false); - virtualElement.current = generateVirtualElement(ev.clientX, ev.clientY); - setIsMenuShowing(true); + if (isMenuShowing && ev.type !== 'contextmenu') { + setIsMenuShowing(false); + closeCurrentOpenContextMenu = undefined; + } else { + closeCurrentOpenContextMenu?.(); + closeCurrentOpenContextMenu = () => setIsMenuShowing(false); + virtualElement.current = generateVirtualElement(ev.clientX, ev.clientY); + setIsMenuShowing(true); + } ev.stopPropagation(); ev.preventDefault(); }; @@ -316,7 +321,7 @@ export function ContextMenu({ buttonNode = ( <> {(children as (props: RenderButtonProps) => JSX.Element)({ - openMenu: onClick || handleClick, + onClick: onClick || handleClick, onKeyDown: handleKeyDown, isMenuShowing, ref: setReferenceElement, diff --git a/ts/components/LeftPane.tsx b/ts/components/LeftPane.tsx index 5fdb86bf5..24e7ddae6 100644 --- a/ts/components/LeftPane.tsx +++ b/ts/components/LeftPane.tsx @@ -668,10 +668,11 @@ export function LeftPane({ }} portalToRoot > - {({ openMenu, onKeyDown }) => { + {({ onClick, onKeyDown, ref }) => { return ( } label="More Actions" diff --git a/ts/components/NavSidebar.tsx b/ts/components/NavSidebar.tsx index 1e83516a4..ff9b8fa72 100644 --- a/ts/components/NavSidebar.tsx +++ b/ts/components/NavSidebar.tsx @@ -16,19 +16,23 @@ import { import { WidthBreakpoint, getNavSidebarWidthBreakpoint } from './_util'; import type { UnreadStats } from '../util/countUnreadStats'; -export function NavSidebarActionButton({ - icon, - label, - onClick, - onKeyDown, -}: { +type NavSidebarActionButtonProps = { icon: ReactNode; label: ReactNode; onClick: MouseEventHandler; onKeyDown?: KeyboardEventHandler; -}): JSX.Element { +}; + +export const NavSidebarActionButton = React.forwardRef< + HTMLButtonElement, + NavSidebarActionButtonProps +>(function NavSidebarActionButtonInner( + { icon, label, onClick, onKeyDown }, + ref +): JSX.Element { return ( ); -} +}); export type NavSidebarProps = Readonly<{ actions?: ReactNode; diff --git a/ts/components/NavTabs.tsx b/ts/components/NavTabs.tsx index a58b45c13..af28b7b88 100644 --- a/ts/components/NavTabs.tsx +++ b/ts/components/NavTabs.tsx @@ -307,7 +307,7 @@ export function NavTabs({ }} portalToRoot > - {({ openMenu, onKeyDown, ref }) => { + {({ onClick, onKeyDown, ref }) => { return (