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

- Updated on click event for button itemt olways clear out all pagebuilder-content-type-active class from stage.
- Updated stop event on sortable to remove active class from stage

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: onMouseOver, 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: onMouseOut }">
     <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/js/content-type/buttons/preview.js

@@ -3,7 +3,9 @@
  * See COPYING.txt for license details.
  */
 
+import $ from "jquery";
 import $t from "mage/translate";
+import _ from "underscore";
 import Option from "../../content-type-menu/option";
 import OptionInterface from "../../content-type-menu/option.d";
 import BasePreview from "../preview";
@@ -42,6 +44,29 @@ export default class Preview extends BasePreview {
         return newOptions;
     }
 
+    /**
+     * Set state based on button click event for the preview
+     *
+     * @param {Preview} context
+     * @param {Event} event
+     */
+    public onButtonClick(context: Preview, event: Event): void {
+
+        // 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;
+        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");
+    }
+
     /**
      * Focus out of the element
      */

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

@@ -211,8 +211,9 @@ export default class Preview extends PreviewCollection {
             /**
              * Logic for post sorting and removing the placeholderGhost
              */
-            stop() {
+            stop(event: Event, element: JQueryUI.SortableUIParams) {
                 placeholderGhost.remove();
+                element.item.find(".pagebuilder-content-type-active").removeClass("pagebuilder-content-type-active");
                 events.trigger("stage:interactionStop");
             },
         };