MC-3709: Safari and firefox button grab handles display on multiple button items

- Updated logic to to set focus before setting active class
- Renamed focusout method to onBlur and no longer extend from onMouseOut

Author: Hwashiang Yu

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

@@ -5,7 +5,7 @@
  */
 -->
 
-<div attr="data.main.attributes" ko-style="data.main.style" css="data.main.css" class="pagebuilder-content-type pagebuilder-button-item no-system-border focus-options" event="{ click: onButtonClick, focusout: onMouseOut }">
+<div attr="data.main.attributes" ko-style="data.main.style" css="data.main.css" class="pagebuilder-content-type pagebuilder-button-item no-system-border focus-options" event="{ click: onButtonClick, focusout: onBlur }">
     <render args="getOptions().template" />
     <a attr="data.link.attributes" ko-style="data.link.style" css="data.link.css">
         <span class="button-item-drag-handle" css="{disabled: parent.parent.children().length <= 1}"></span>

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

@@ -55,24 +55,24 @@ export default class Preview extends BasePreview {
         // Ensure no other options panel and button drag handles are displayed
         $(".pagebuilder-content-type-active").removeClass("pagebuilder-content-type-active");
         $(".pagebuilder-options-visible").removeClass("pagebuilder-options-visible");
-        const currentTarget = event.currentTarget;
+        const currentTarget = $(event.currentTarget).closest("[data-element='main']")[0];
         let optionsMenu = $(currentTarget).find(".pagebuilder-options-wrapper");
 
         if (!$(currentTarget).hasClass("type-nested")) {
             optionsMenu = optionsMenu.first();
         }
         optionsMenu.parent().addClass("pagebuilder-options-visible");
-        $(currentTarget).addClass("pagebuilder-content-type-active");
         $(currentTarget).find("[data-element='link_text']").focus();
+        $(currentTarget).addClass("pagebuilder-content-type-active");
     }
 
     /**
-     * Set state based on mouseout event for the preview
+     * Set state based on blur event for the preview
      *
      * @param {Preview} context
      * @param {Event} event
      */
-    public onMouseOut(context: Preview, event: Event) {
+    public onBlur(context: Preview, event: Event) {
         const currentTarget = event.currentTarget;
         let optionsMenu = $(currentTarget).find(".pagebuilder-options-wrapper");