MC-876: Pagebuilder - Tabs Advanced Border Displays Differently On Stage & Storefront

Author: omiroshnichenko

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

@@ -130,11 +130,6 @@
                 }
             }
 
-            // Keeps the options showing while the user clicks. Otherwise the focus is lost and the options hide.
-            .pagebuilder-options:hover {
-                .pagebuilder-options-visible;
-            }
-
             &.focused {
                 a.tab-title .tab-drag-handle {
                     opacity: 1;

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

@@ -6,15 +6,21 @@
 -->
 
 <div class="pagebuilder-content-type pagebuilder-tabs children-min-height" attr="data.main.attributes" ko-style="data.main.style" css="data.main.css" event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
-    <render args="getOptions().template" />
+    <div visible="focusedTab() === null">
+        <render args="getOptions().template" />
+    </div>
     <div class="tabs-container" afterRender="function (element) { onContainerRender.call($data, element); }">
         <ul role="tablist" class="tabs-navigation" each="parent.getChildren()" attr="data.navigation.attributes" ko-style="data.navigation.style" css="data.navigation.css" data-bind="sortableChildren: getSortableOptions()">
             <with args="preview">
-                <li role="tab" class="tab-header" css="{focused: parent.parent.preview.focusedTab() === $index()}" click="function (context, event) { parent.parent.preview.onTabClick($index(), event); }" ko-style="parent.parent.preview.getTabHeaderStyles()">
+                <li role="tab" class="tab-header"
+                    css="{focused: parent.parent.preview.focusedTab() === $index()}"
+                    click="function (context, event) { parent.parent.preview.onTabClick($index(), event); }"
+                    ko-style="parent.parent.preview.getTabHeaderStyles()"
+                    event="{ focusin: function () { parent.parent.preview.setFocusedTab($index(), true) }, focusout: function () { window.getSelection().removeAllRanges(); parent.parent.preview.setFocusedTab(null); } }">
                     <a href="#no-tab" class="tab-title focus-options" attr="{ href: '#' + parent.id }">
                         <render args="getOptions().template" />
                         <span class="tab-drag-handle" css="{disabled: parent.parent.children().length <= 1}"></span>
-                        <span class="tab-title tab-name" data-tab-title="true" data-bind="liveEdit: { field: 'tab_name', placeholder: $t('...') }, hasFocusNoScroll: parent.parent.preview.focusedTab() === $index()" event="{ focusin: function () { parent.parent.preview.setFocusedTab($index(), true) }, focusout: function () { window.getSelection().removeAllRanges(); parent.parent.preview.setFocusedTab(null); } }"></span>
+                        <span class="tab-title tab-name" data-tab-title="true" data-bind="liveEdit: { field: 'tab_name', placeholder: $t('...') }, hasFocusNoScroll: parent.parent.preview.focusedTab() === $index()"></span>
                     </a>
                 </li>
             </with>