From 3d6fae3ea78d4a44d7e9acc5f5e83dc6e5d104a2 Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@ghost.org>
Date: Mon, 29 Apr 2024 17:58:33 +0100
Subject: [PATCH] Fixed intermittent click issues with internal links dropdown
 (#20101)

closes https://linear.app/tryghost/issue/MOM-60

- when the dropdown opens near the end of the document, clicking the links sometimes did nothing and showed an error in the console
- we have a mousedown event handler on an element that surrounds the main editing element that re-focuses the editor when clicked in order to make the "focus editor" click target larger and more natural-feeling but it was inadvertently re-focusing when the mousedown event fired for an element in the dropdown list when the list was positioned outside of the main editor element. This lead to timing issues with the bookmark node being removed on blur because it was empty followed by an error from the node's component's async event handlers which were trying to set values on the now-removed node
- by switching from `event.target.closest()` to looping over `event.composedPath()` when checking to see if we should skip re-focusing we're more resilient to DOM manipulations occurring between event triggers and function calls because we'll always be given the list of elements that existed at the time the event fired
---
 .../admin/app/components/gh-koenig-editor-lexical.js  | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/ghost/admin/app/components/gh-koenig-editor-lexical.js b/ghost/admin/app/components/gh-koenig-editor-lexical.js
index 5024faa153..abc7eb7c4b 100644
--- a/ghost/admin/app/components/gh-koenig-editor-lexical.js
+++ b/ghost/admin/app/components/gh-koenig-editor-lexical.js
@@ -44,10 +44,15 @@ export default class GhKoenigEditorReactComponent extends Component {
         // mouseup/click event can occur outside of the initially clicked card, in
         // which case we don't want to then "re-focus" the editor and cause unexpected
         // selection changes
-        const clickedOnDecorator = (event.target.closest('[data-lexical-decorator]') !== null) || event.target.hasAttribute('data-lexical-decorator');
-        const clickedOnSlashMenu = (event.target.closest('[data-kg-slash-menu]') !== null) || event.target.hasAttribute('data-kg-slash-menu');
+        let skipFocus = false;
+        for (const elem of (event.path || event.composedPath())) {
+            if (elem.matches?.('[data-lexical-decorator], [data-kg-slash-menu]')) {
+                skipFocus = true;
+                break;
+            }
+        }
 
-        if (clickedOnDecorator || clickedOnSlashMenu) {
+        if (skipFocus) {
             this.skipFocusEditor = true;
         }
     }