Disabled feedback dropdown closing on outside click

no issue

ghost/admin/app/components/feedback-lexical/editor-dropdown.hbs

@@ -0,0 +1,49 @@
+<GhBasicDropdown
+    @verticalPosition="above"
+    @onClose={{this.onClose}}
+    @horizontalPosition="left" as |dd|
+>
+    <dd.Trigger
+        class="gh-editor-feedback-trigger gh-btn gh-btn-editor green"
+        data-test-button="lexical-editor-feedback"
+    >
+        <span class="gh-editor-feedback" data-trigger="true"> {{!-- data-trigger attr used for dropdown closing --}}
+            Feedback?
+        </span>
+    </dd.Trigger>
+
+    <dd.Content class="gh-editor-feedback-dropdown-container">
+        <div {{css-transition "anim-fade-in-scale"}}>
+            <div class="gh-editor-feedback-dropdown" data-test-modal="lexical-feedback">
+                <header class="gh-editor-feedback-dropdown-header">
+                    <h3>Editor beta feedback</h3>
+                </header>
+                {{!-- <button class="close" type="button" title="Close" {{on "click" (fn this.onCancel dd)}}>{{svg-jar "close"}}<span
+                        class="hidden">Close</span></button> --}}
+
+                <div class="">
+                    <p>Have any issues? Feedback? Let us know!</p>
+                    <FeedbackLexical::Textarea
+                        @feedbackMessage={{this.feedbackMessage}}
+                        @updateFeedbackMessage={{this.updateFeedbackMessage}}
+                    />
+                </div>
+
+                <div class="gh-editor-feedback-dropdown-footer">
+                    <FeedbackLexical::SendButton
+                        @onSuccess={{fn this.onSent dd}}
+                        @feedbackMessage={{this.feedbackMessage}}
+                        @post={{@post}}
+                    />
+                    <button
+                        class="gh-btn"
+                        type="button"
+                        {{on "click" (fn this.onCancel dd)}}
+                    >
+                        <span>Cancel</span>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </dd.Content>
+</GhBasicDropdown>

ghost/admin/app/components/feedback-lexical/editor-dropdown.js

@@ -0,0 +1,42 @@
+import Component from '@glimmer/component';
+import {action} from '@ember/object';
+import {tracked} from '@glimmer/tracking';
+
+export default class FeedbackLexicalEditorFormComponent extends Component {
+    @tracked feedbackMessage = '';
+
+    eventType = 'close';
+
+    @action
+    updateFeedbackMessage(event) {
+        this.feedbackMessage = event.target.value;
+    }
+
+    @action
+    onSent(dropdown) {
+        dropdown.actions.close(this.eventType);
+        this.feedbackMessage = '';
+    }
+
+    @action
+    onCancel(dropdown) {
+        dropdown.actions.close(this.eventType);
+    }
+
+    @action
+    onClose(dropdown, event) {
+        // Need this logic to disable dropdown closing on clicking outside https://ember-basic-dropdown.com/docs/dropdown-events
+        // Close if the message was sent or Cancel button clicked
+        if (event === this.eventType) {
+            return true;
+        }
+
+        // Close if trigger button was clicked
+        if (event?.target?.dataset?.trigger) {
+            return true;
+        }
+
+        // Leave dropdown open for all other events
+        return false;
+    }
+}

ghost/admin/app/components/feedback-lexical/editor-form.hbs

@@ -1,24 +0,0 @@
-<div class="gh-editor-feedback-dropdown" data-test-modal="lexical-feedback">
-    <header class="gh-editor-feedback-dropdown-header">
-        <h3>Editor beta feedback</h3>
-    </header>
-    {{!-- <button class="close" type="button" title="Close" {{on "click" this.closeModal}}>{{svg-jar "close"}}<span
-            class="hidden">Close</span></button> --}}
-
-    <div class="">
-        <p>Have any issues? Feedback? Let us know!</p>
-        <FeedbackLexical::Textarea
-            @feedbackMessage={{this.feedbackMessage}}
-            @updateFeedbackMessage={{this.updateFeedbackMessage}}
-        />
-    </div>
-
-    <div class="gh-editor-feedback-dropdown-footer">
-        <FeedbackLexical::SendButton
-            @onSuccess={{this.closeModal}}
-            @feedbackMessage={{this.feedbackMessage}}
-            @post={{@post}}
-        />
-        <button class="gh-btn" type="button" {{on "click" this.closeModal}}><span>Cancel</span></button>
-    </div>
-</div>

ghost/admin/app/components/feedback-lexical/editor-form.js

@@ -1,17 +0,0 @@
-import Component from '@glimmer/component';
-import {action} from '@ember/object';
-import {tracked} from '@glimmer/tracking';
-
-export default class FeedbackLexicalEditorFormComponent extends Component {
-    @tracked feedbackMessage = '';
-
-    @action
-    closeModal() {
-        this.args.close();
-    }
-
-    @action
-    updateFeedbackMessage(event) {
-        this.feedbackMessage = event.target.value;
-    }
-}

ghost/admin/app/templates/lexical-editor.hbs

@@ -94,28 +94,7 @@
             />
 
             {{#if (feature 'lexicalEditor')}}
-                <GhBasicDropdown
-                    @verticalPosition="above"
-                    @horizontalPosition="left" as |dd|
-                >
-                    <dd.Trigger
-                        class="gh-editor-feedback-trigger gh-btn gh-btn-editor green"
-                        data-test-button="lexical-editor-feedback"
-                    >
-                        <span class="gh-editor-feedback">
-                            Feedback?
-                        </span>
-                    </dd.Trigger>
-
-                    <dd.Content class="gh-editor-feedback-dropdown-container">
-                        <div {{css-transition "anim-fade-in-scale"}}>
-                            <FeedbackLexical::EditorForm
-                                @post={{this.post}}
-                                @close={{dd.actions.close}}
-                            />
-                        </div>
-                    </dd.Content>
-                </GhBasicDropdown>
+                <FeedbackLexical::EditorDropdown @post={{this.post}} />
             {{/if}}
 
             <div class="gh-editor-wordcount-container">