From bd9f6bb21600570d0009ae2c37964c91f11824df Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Thu, 12 Dec 2024 13:30:01 +0000
Subject: [PATCH] Fixed "Edit expertise" button often not working on main
 comment form

closes https://linear.app/ghost/issue/PLG-302

- switching from `onClick` to `onMouseDown` allows the button events to fire and be picked up by the popup-opening handler before the click causes a blur event on the main form to fire which removes the expertise buttons
- we have a test for adding expertise via the main form which was giving us a false positive due to the way Playwright handles events, unfortunately I couldn't find a way to adjust that to match the real-world behaviour without ending up with a test that always fails
---
 apps/comments-ui/src/components/content/forms/Form.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/comments-ui/src/components/content/forms/Form.tsx b/apps/comments-ui/src/components/content/forms/Form.tsx
index 1aedffca2e..05c484f68b 100644
--- a/apps/comments-ui/src/components/content/forms/Form.tsx
+++ b/apps/comments-ui/src/components/content/forms/Form.tsx
@@ -188,7 +188,7 @@ const FormHeader: React.FC<FormHeaderProps> = ({show, name, expertise, replyingT
                 <div
                     className="w-full font-sans text-base font-bold leading-snug text-neutral-900 sm:w-auto sm:text-sm dark:text-white/85"
                     data-testid="member-name"
-                    onClick={editName}
+                    onMouseDown={editName}
                 >
                     {name ? name : 'Anonymous'}
                 </div>
@@ -197,7 +197,7 @@ const FormHeader: React.FC<FormHeaderProps> = ({show, name, expertise, replyingT
                         className={`group flex items-center justify-start whitespace-nowrap text-left font-sans text-base leading-snug text-neutral-900/50 transition duration-150 hover:text-black/75 sm:text-sm dark:text-white/60 dark:hover:text-white/75 ${!expertise && 'text-black/30 hover:text-black/50 dark:text-white/30 dark:hover:text-white/50'}`}
                         data-testid="expertise-button"
                         type="button"
-                        onClick={editExpertise}
+                        onMouseDown={editExpertise}
                     >
                         <span><span className="mx-[0.3em] hidden sm:inline">·</span>{expertise ? expertise : 'Add your expertise'}</span>
                         {expertise && <EditIcon className="ml-1 h-[12px] w-[12px] translate-x-[-6px] stroke-black/50 opacity-0 transition-all duration-100 ease-out group-hover:translate-x-0 group-hover:stroke-black/75 group-hover:opacity-100 dark:stroke-white/60 dark:group-hover:stroke-white/75" />}