Merge remote-tracking branch 'remotes/origin/MC-5443' into cms-team-1-delivery

Author: danmooney2

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/slider/_default.less

@@ -221,6 +221,10 @@
                         border: none;
                         transition: all .3s;
                     }
+
+                    .pagebuilder-options {
+                        z-index: auto;
+                    }
                 }
 
                 &.focus {

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

@@ -16,6 +16,7 @@
     </div>
     <div class="slider-controls focus-options">
         <div class="slider-navigation"
+             afterRender="afterNavigationRender"
              each="$parent.getChildren()"
              data-bind="sortableChildren: { handle: '.navigation-dot-anchor', containment: 'parent', placeholder: 'navigation-dot sortable-placeholder', tolerance: 'pointer', start: onSortStart.bind($parent.preview), stop: onSortStop.bind($parent.preview) }">
             <div class="navigation-dot"

app/code/Magento/PageBuilder/view/adminhtml/web/js/stage.js

@@ -41,6 +41,7 @@ export default class Preview extends PreviewCollection {
     protected events: DataObject = {
         columnWidthChangeAfter: "onColumnResize",
     };
+    private navigationElement: HTMLElement;
     private ready: boolean = false;
     private childSubscribe: KnockoutSubscription;
     private contentTypeHeightReset: boolean;
@@ -171,11 +172,39 @@ export default class Preview extends PreviewCollection {
      * @param {JQueryEventObject} event
      */
     public onFocusOut(data: PreviewCollection, event: JQueryEventObject) {
-        if (_.isNull(event.relatedTarget) ||
-            event.relatedTarget && !$(event.currentTarget as HTMLElement).closest(event.relatedTarget).length
-        ) {
+        let relatedTarget = event.relatedTarget;
+
+        if (!relatedTarget && document.activeElement && !(document.activeElement instanceof HTMLBodyElement)) {
+            relatedTarget = document.activeElement;
+        }
+
+        if (!relatedTarget) {
             this.setFocusedSlide(null);
+            return;
         }
+
+        const $relatedTarget = $(relatedTarget);
+
+        const isRelatedTargetDescendantOfNavigation = $relatedTarget.closest(this.navigationElement).length;
+        const isFocusedOnAnotherSlideInThisSlider = (
+            $relatedTarget.hasClass("navigation-dot-anchor") &&
+            isRelatedTargetDescendantOfNavigation
+        );
+
+        if (isFocusedOnAnotherSlideInThisSlider) {
+            events.trigger("stage:interactionStop");
+        } else if (!isRelatedTargetDescendantOfNavigation) {
+            this.setFocusedSlide(null);
+        }
+    }
+
+    /**
+     * Set reference to navigation element in template
+     *
+     * @param {HTMLElement} navigationElement
+     */
+    public afterNavigationRender(navigationElement: HTMLElement): void {
+        this.navigationElement = navigationElement;
     }
 
     /**

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slider/default/preview.html

@@ -199,7 +199,9 @@ export default class Stage {
         });
         events.on("stage:interactionStop", (args: {force: boolean}) => {
             const forced = (_.isObject(args) && args.force === true);
-            if (--interactionLevel === 0 || forced) {
+            interactionLevel = Math.max(interactionLevel - 1, 0);
+
+            if (interactionLevel === 0 || forced) {
                 this.interacting(false);
                 if (forced) {
                     interactionLevel = 0;