Merge branch 'MC-843-heading-live-edit-should-unfocus' into cms-team-2-sprint-14

Author: Hwashiang Yu

app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderHeadingSection.xml

@@ -17,6 +17,7 @@
         <element name="headingOnStage" type="text" selector="(//{{arg1}}[contains(@data-bind,'heading_text')])[{{arg2}}]" parameterized="true"/>
         <element name="headingType" type="button" selector="(//{{arg1}})[{{arg2}}]" parameterized="true"/>
         <element name="headingEditableText" type="button" selector="(//div[contains(@class, 'pagebuilder-heading')])[{{arg1}}]//h2[contains(@contenteditable, 'true')]" parameterized="true"/>
+        <element name="headingToolbar" type="text" selector="(//div[contains(@class,'pagebuilder-heading')])[{{arg1}}]//div[contains(@class, 'pagebuilder-toolbar-options')]" parameterized="true"/>
         <element name="headingTypeToolbar" type="text" selector="(//div[contains(@class,'pagebuilder-heading')])[{{arg1}}]//span[text()='{{arg2}}']" parameterized="true"/>
         <element name="headingTypeToolbarSelected" type="text" selector="(//div[contains(@class,'pagebuilder-heading')])[{{arg1}}]//a[contains(@class, 'toolbar-active')]//span[text()='{{arg2}}']" parameterized="true"/>
         <element name="headingTextAlignToolbar" type="button" selector="(//div[contains(@class,'pagebuilder-heading')])[{{arg1}}]//i[contains(@class,'icon-pagebuilder-align-{{arg2}}')]" parameterized="true"/>

app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderHeadingEditOnStageTest.xml

@@ -1574,4 +1574,44 @@
             <expectedResult type="variable">actualLastButtonYPosition</expectedResult>
         </assertLessThan>
     </test>
+    <test name="HeadingToolbarHideOnDrag">
+        <annotations>
+            <features value="PageBuilder"/>
+            <stories value="Heading"/>
+            <title value="Stage Edit - Heading Toolbar should hide on drag action"/>
+            <description value="Heading live edit should become unfocused on drag action"/>
+            <severity value="MINOR"/>
+            <useCaseId value="MC-843"/>
+            <testCaseId value="MC-3540"/>
+            <group value="pagebuilder"/>
+            <group value="pagebuilder-heading"/>
+        </annotations>
+        <before>
+            <actionGroup ref="LoginAsAdmin" stepKey="loginAsAdmin"/>
+            <actionGroup ref="navigateToAPageWithPageBuilder" stepKey="navigateToAPageWithPageBuilder"/>
+            <actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStage"/>
+        </before>
+        <after>
+            <actionGroup ref="logout" stepKey="logout"/>
+        </after>
+        <actionGroup ref="expandPageBuilderPanelGroup" stepKey="expandPageBuilderPanelGroup">
+            <argument name="group" value="PageBuilderHeadingContentType"/>
+        </actionGroup>
+        <actionGroup ref="dragContentTypeToStage" stepKey="dragHeadingIntoStage">
+            <argument name="contentType" value="PageBuilderHeadingContentType"/>
+        </actionGroup>
+        <!-- Validate Heading edit toolbar shows after dragging in -->
+        <comment userInput="Validate Heading edit toolbar" stepKey="CommentHeadingEditToolbar"/>
+        <seeElement selector="{{HeadingOnStage.headingToolbar('1')}}" stepKey="seeHeadingToolbar"/>
+        <!-- Check if clicking on draggable content, the heading input loses focus and the toolbar hides -->
+        <comment userInput="When click on draggable content, heading input loses focus, toolbar disappears, and placeholder displays Enter Heading Text" stepKey="commentClickOnDraggable"/>
+        <click selector="{{PageBuilderPanel.draggableContentTypeInPanel(PageBuilderHeadingContentType.name)}}" stepKey="clickDraggableInPanel"/>
+        <dontSeeElement selector="{{HeadingOnStage.headingToolbar('1')}}" stepKey="dontSeeHeadingToolbar"/>
+        <!-- Check if heading toolbar shows after focusing on heading content type -->
+        <comment userInput="When click inside heading see heading input gain focus, placeholder disappears and WYSIWYG toolbar appears" stepKey="commentClickInsideHeading"/>
+        <actionGroup ref="clickInsideLiveEditHeading" stepKey="clickInsideLiveEditHeading">
+            <argument name="index" value="1"/>
+        </actionGroup>
+        <seeElement selector="{{HeadingOnStage.headingToolbar('1')}}" stepKey="seeHeadingToolbar2"/>
+    </test>
 </tests>

app/code/Magento/PageBuilder/view/adminhtml/web/js/binding/draggable.js

@@ -12,6 +12,10 @@ import ko from "knockout";
 // Create a new sortable Knockout binding
 ko.bindingHandlers.draggable = {
     init(element, valueAccessor) {
-        $(element).draggable(valueAccessor());
+        $(element).on("mousedown", () => {
+            if (document.hasFocus()) {
+                (document.activeElement as HTMLElement).blur();
+            }
+        }).draggable(valueAccessor());
     },
 };