From 42b30ac613f0d776a9e163d5b991a684b6a31df2 Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Mon, 23 Jan 2023 09:47:33 +0000
Subject: [PATCH] Fixed email preview input dropdown not closing when clicking
 on iframe

no issue

- clicks on the iframe never bubble out of the iframe so weren't captured by the dropdown-closing event listener
- added an event listener directly on the iframe's body element when we render the iframe's content that manually calls out to our generic dropdown closing method
---
 ghost/admin/app/components/editor/modals/preview/email.js | 4 ++++
 ghost/admin/app/services/dropdown.js                      | 3 +++
 2 files changed, 7 insertions(+)

diff --git a/ghost/admin/app/components/editor/modals/preview/email.js b/ghost/admin/app/components/editor/modals/preview/email.js
index d0887bc7e1..ee6809decd 100644
--- a/ghost/admin/app/components/editor/modals/preview/email.js
+++ b/ghost/admin/app/components/editor/modals/preview/email.js
@@ -32,6 +32,7 @@ const SEGMENT_OPTIONS = [{
 // TODO: remove duplication with <ModalPostEmailPreview>
 export default class ModalPostPreviewEmailComponent extends Component {
     @service ajax;
+    @service dropdown;
     @service feature;
     @service ghostPaths;
     @service session;
@@ -76,6 +77,9 @@ export default class ModalPostPreviewEmailComponent extends Component {
             iframe.contentWindow.document.open();
             iframe.contentWindow.document.write(this.html);
             iframe.contentWindow.document.close();
+
+            iframe.contentWindow.document.removeEventListener('click', this.dropdown.closeDropdowns);
+            iframe.contentWindow.document.addEventListener('click', this.dropdown.closeDropdowns);
         }
     }
 
diff --git a/ghost/admin/app/services/dropdown.js b/ghost/admin/app/services/dropdown.js
index 63a3aba350..b47860c658 100644
--- a/ghost/admin/app/services/dropdown.js
+++ b/ghost/admin/app/services/dropdown.js
@@ -4,6 +4,7 @@ import classic from 'ember-classic-decorator';
 import BodyEventListener from 'ghost-admin/mixins/body-event-listener';
 import Evented from '@ember/object/evented';
 import Service from '@ember/service';
+import {action} from '@ember/object';
 
 @classic
 export default class DropdownService extends Service.extend(Evented, BodyEventListener) {
@@ -15,10 +16,12 @@ export default class DropdownService extends Service.extend(Evented, BodyEventLi
         }
     }
 
+    @action
     closeDropdowns() {
         this.trigger('close');
     }
 
+    @action
     toggleDropdown(dropdownName, dropdownButton) {
         this.trigger('toggle', {target: dropdownName, button: dropdownButton});
     }