MC-14994: Heading (& Text, Banner, Slide) toolbar menu is positioned incorrectly on first drop on stage

- fix toolbar race condition

Author: anthoula

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

@@ -4,15 +4,14 @@
  */
 
 import $ from "jquery";
-import events from "Magento_PageBuilder/js/events";
 import _ from "underscore";
 import ContentTypeConfigInterface from "../../content-type-config.types";
 import HideShowOption from "../../content-type-menu/hide-show-option";
 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 {ContentTypeDroppedCreateEventParamsInterface} from "../content-type-events.types";
+import deferred, {DeferredInterface} from "../../utils/promise-deferred";
 import ObservableUpdater from "../observable-updater";
 import BasePreview from "../preview";
 
@@ -22,6 +21,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
@@ -38,6 +38,15 @@ export default class Preview extends BasePreview implements ContentTypeToolbarPr
             this,
             this.getToolbarOptions(),
         );
+
+        Promise.all([
+            this.afterRenderDeferred.promise,
+            this.toolbar.afterRenderDeferred.promise,
+        ]).then(([element]) => {
+            _.defer(() => {
+                $(element).focus();
+            });
+        });
     }
 
     /**
@@ -61,25 +70,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;
-    }
-
-    public bindEvents() {
-        super.bindEvents();
-
-        // 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
-            }
-        });
+        this.afterRenderDeferred.resolve(element);
     }
 
     /**