Merge pull request #275 from magento-obsessive-owls/MC-14994

[Owls] MC-14994: Heading toolbar menu is positioned incorrectly on first drop on stage

Author: davemacaulay

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type-toolbar.js

@@ -5,7 +5,7 @@
  */
 -->
 
-<div class="pagebuilder-toolbar-options">
+<div class="pagebuilder-toolbar-options" afterRender="function (element) { afterRender.call($data, element); }">
     <div class="pagebuilder-toolbar-options-wrapper" each="options">
         <ul class="pagebuilder-toolbar-options-links" css="key" each="values">
             <li class="pagebuilder-toolbar-options-link">

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/heading/preview.js

@@ -11,14 +11,17 @@ import Preview from "./content-type/preview";
 import {PreviewCollectionInterface} from "./content-type/preview-collection.types";
 import {PreviewInterface} from "./content-type/preview.types";
 import checkStageFullScreen from "./utils/check-stage-full-screen";
+import deferred, {DeferredInterface} from "./utils/promise-deferred";
 
 /**
  * @api
  */
 export default class Toolbar {
     public options: KnockoutObservableArray<OptionInterface> = ko.observableArray([]);
     public observer: MutationObserver;
+    public afterRenderDeferred: DeferredInterface = deferred();
     private preview: Preview;
+    private element: Element;
 
     /**
      * Toolbar Options constructor
@@ -40,6 +43,16 @@ export default class Toolbar {
          return "Magento_PageBuilder/content-type-toolbar";
     }
 
+    /**
+     * On render init the toolbar
+     *
+     * @param {Element} element
+     */
+    public afterRender(element: Element): void {
+        this.element = element;
+        this.afterRenderDeferred.resolve(element);
+    }
+
     /**
      * Upon clicking the option update the value as directed
      * When user toggles the option off, set the value back to default

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type-toolbar.html

@@ -12,6 +12,7 @@ import {OptionsInterface} from "../../content-type-menu/option.types";
 import Toolbar, {ContentTypeToolbarPreviewInterface} from "../../content-type-toolbar";
 import {OptionInterface} from "../../content-type-toolbar.types";
 import ContentTypeInterface from "../../content-type.types";
+import deferred, {DeferredInterface} from "../../utils/promise-deferred";
 import {ContentTypeDroppedCreateEventParamsInterface} from "../content-type-events.types";
 import ObservableUpdater from "../observable-updater";
 import BasePreview from "../preview";
@@ -22,6 +23,7 @@ import BasePreview from "../preview";
 export default class Preview extends BasePreview implements ContentTypeToolbarPreviewInterface {
     public toolbar: Toolbar;
     private element: Element;
+    private afterRenderDeferred: DeferredInterface = deferred();
 
     /**
      * @param {ContentTypeInterface} contentType
@@ -61,12 +63,13 @@ export default class Preview extends BasePreview implements ContentTypeToolbarPr
     }
 
     /**
-     * On render init the tabs widget
+     * On render init the heading
      *
      * @param {Element} element
      */
     public afterRender(element: Element): void {
         this.element = element;
+        this.afterRenderDeferred.resolve(element);
     }
 
     public bindEvents() {
@@ -75,9 +78,14 @@ export default class Preview extends BasePreview implements ContentTypeToolbarPr
         // When a heading is dropped for the first time show heading toolbar
         events.on("heading:dropAfter", (args: ContentTypeDroppedCreateEventParamsInterface) => {
             if (args.id === this.contentType.id) {
-                _.delay(() => {
-                    $(this.element).focus();
-                }, 100); // 100 ms delay to allow for heading to render
+                Promise.all([
+                    this.afterRenderDeferred.promise,
+                    this.toolbar.afterRenderDeferred.promise,
+                ]).then(([element]) => {
+                    _.defer(() => {
+                        $(element).focus();
+                    });
+                });
             }
         });
     }