MC-5443: IE11 - Cannot Use Slide Item Option Menu

Support applying focus to slide in one click

- relatedTarget is always null for these events in IE11, but document.activeElement can be used in its place

Author: danmooney2

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/template/content-type/slider/default/preview.html

@@ -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,13 +172,33 @@ 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;
+        }
+
+        const relatedTargetIsDescendantOfNavigation = (
+            relatedTarget &&
+            $(relatedTarget as HTMLElement).closest(this.navigationElement).length
+        );
+
+        const shouldUnsetFocusedSlide = !relatedTarget || !relatedTargetIsDescendantOfNavigation;
+
+        if (shouldUnsetFocusedSlide) {
             this.setFocusedSlide(null);
         }
     }
 
+    /**
+     * Set reference to navigation element in template
+     *
+     * @param {HTMLElement} navigationElement
+     */
+    public afterNavigationRender(navigationElement: HTMLElement): void {
+        this.navigationElement = navigationElement;
+    }
+
     /**
      * Navigate to a slide
      *