From 983b7729b3f8d8d09fed702e2e71afb4a0da4e29 Mon Sep 17 00:00:00 2001
From: Ricardo Amaral <ricardo@doist.com>
Date: Mon, 30 Sep 2024 12:32:59 +0100
Subject: [PATCH] chore(storybook): Prevent `keyDown` propagation with hidden
 suggestion dropdown

---
 .../typist-editor/extensions/hashtag-suggestion.ts  | 13 ++++++++++---
 .../typist-editor/extensions/mention-suggestion.ts  | 10 +++++++++-
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/stories/typist-editor/extensions/hashtag-suggestion.ts b/stories/typist-editor/extensions/hashtag-suggestion.ts
index b3bf3b5b..dcdfa61c 100644
--- a/stories/typist-editor/extensions/hashtag-suggestion.ts
+++ b/stories/typist-editor/extensions/hashtag-suggestion.ts
@@ -44,8 +44,10 @@ const HashtagSuggestion: SuggestionExtensionResult<HashtagSuggestionItem> =
 
             // These flag variables control when the renderer functions are allowed to be called,
             // and they are needed to work around a few issues with Tiptap's suggestion utility:
+            //   * https://github.com/ueberdosis/tiptap/issues/214
             //   * https://github.com/ueberdosis/tiptap/issues/2547
             //   * https://github.com/ueberdosis/tiptap/issues/2592
+            let isDropdownHidden = false
             let isDropdownInitialized = false
             let wasDropdownDestroyed = false
 
@@ -71,6 +73,12 @@ const HashtagSuggestion: SuggestionExtensionResult<HashtagSuggestionItem> =
                         getReferenceClientRect() {
                             return props.clientRect?.() || DOM_RECT_FALLBACK
                         },
+                        onHide() {
+                            isDropdownHidden = true
+                        },
+                        onShow() {
+                            isDropdownHidden = false
+                        },
                         content: reactRenderer.element,
                         duration: [150, 200],
                         interactive: true,
@@ -124,13 +132,12 @@ const HashtagSuggestion: SuggestionExtensionResult<HashtagSuggestionItem> =
                     })
                 },
                 onKeyDown(props) {
-                    if (!isDropdownInitialized) {
+                    if (!isDropdownInitialized || isDropdownHidden) {
                         return false
                     }
 
                     if (props.event.key === 'Escape') {
-                        dropdown[0].destroy()
-                        reactRenderer.destroy()
+                        dropdown[0].hide()
                         return true
                     }
 
diff --git a/stories/typist-editor/extensions/mention-suggestion.ts b/stories/typist-editor/extensions/mention-suggestion.ts
index a618f206..542ec5ed 100644
--- a/stories/typist-editor/extensions/mention-suggestion.ts
+++ b/stories/typist-editor/extensions/mention-suggestion.ts
@@ -40,8 +40,10 @@ const MentionSuggestion: SuggestionExtensionResult<MentionSuggestionItem> =
 
             // These flag variables control when the renderer functions are allowed to be called,
             // and they are needed to work around a few issues with Tiptap's suggestion utility:
+            //   * https://github.com/ueberdosis/tiptap/issues/214
             //   * https://github.com/ueberdosis/tiptap/issues/2547
             //   * https://github.com/ueberdosis/tiptap/issues/2592
+            let isDropdownHidden = false
             let isDropdownInitialized = false
             let wasDropdownDestroyed = false
 
@@ -64,6 +66,12 @@ const MentionSuggestion: SuggestionExtensionResult<MentionSuggestionItem> =
                         getReferenceClientRect() {
                             return props.clientRect?.() || DOM_RECT_FALLBACK
                         },
+                        onHide() {
+                            isDropdownHidden = true
+                        },
+                        onShow() {
+                            isDropdownHidden = false
+                        },
                         content: reactRenderer.element,
                         duration: [150, 200],
                         interactive: true,
@@ -88,7 +96,7 @@ const MentionSuggestion: SuggestionExtensionResult<MentionSuggestionItem> =
                     })
                 },
                 onKeyDown(props) {
-                    if (!isDropdownInitialized) {
+                    if (!isDropdownInitialized || isDropdownHidden) {
                         return false
                     }