Updated menu items to not trigger parent item click handler

ref https://linear.app/ghost/issue/AP-576/clicking-copy-link-to-post-shouldnt-open-the-drawer
This commit is contained in:
Djordje Vlaisavljevic 2024-11-13 16:40:13 +00:00
parent 9da4aa3bce
commit 71e80e32dc
2 changed files with 11 additions and 4 deletions

View File

@ -173,7 +173,8 @@ const FeedItem: React.FC<FeedItemProps> = ({actor, object, layout, type, comment
// // Handle delete action // // Handle delete action
// }; // };
const handleCopyLink = async () => { const handleCopyLink = async (e: React.MouseEvent) => {
e.stopPropagation();
if (object?.url) { if (object?.url) {
await navigator.clipboard.writeText(object.url); await navigator.clipboard.writeText(object.url);
setIsCopied(true); setIsCopied(true);
@ -195,7 +196,9 @@ const FeedItem: React.FC<FeedItemProps> = ({actor, object, layout, type, comment
menuItems.push({ menuItems.push({
id: 'copy-link', id: 'copy-link',
label: 'Copy link to post', label: 'Copy link to post',
onClick: handleCopyLink onClick: (e: React.MouseEvent) => {
handleCopyLink(e);
}
}); });
// TODO: If this is your own Note/Article, you should be able to delete it // TODO: If this is your own Note/Article, you should be able to delete it

View File

@ -6,7 +6,7 @@ export type MenuItem = {
id: string, id: string,
label: string; label: string;
destructive?: boolean; destructive?: boolean;
onClick?: () => void onClick?: (e: React.MouseEvent) => void
} }
export interface MenuProps { export interface MenuProps {
@ -31,7 +31,11 @@ const Menu: React.FC<MenuProps> = ({
<Popover position={position} trigger={trigger} closeOnItemClick> <Popover position={position} trigger={trigger} closeOnItemClick>
<div className="flex min-w-[160px] flex-col justify-stretch py-1" role="none"> <div className="flex min-w-[160px] flex-col justify-stretch py-1" role="none">
{items.map(item => ( {items.map(item => (
<button key={item.id} className={`mx-1 block cursor-pointer rounded-[2.5px] px-4 py-1.5 text-left text-sm hover:bg-grey-100 ${item.destructive && ' text-red-500'}`} type="button" onClick={item.onClick}>{item.label}</button> <button key={item.id} className={`mx-1 block cursor-pointer rounded-[2.5px] px-4 py-1.5 text-left text-sm hover:bg-grey-100 ${item.destructive && ' text-red-500'}`} type="button" onClick={(e) => {
if (item.onClick) {
item.onClick(e);
}
}}>{item.label}</button>
))} ))}
</div> </div>
</Popover> </Popover>