Widget with array with nested areas - After after opening widget edit modal, parent array breadcrumb click no longer opens far right breadcrumb and edit options #4738
Description
To Reproduce
Step by step instructions to reproduce the behavior:
- Please find video example for issue experienced - https://www.loom.com/share/034d41f2a3094aecb9b390bc371125b5?sid=202dddaf-7207-4f2b-bf3c-049db60202ac
Expected behavior
When editing a widget on the frontend for array with areas, the parent level breadcrumb option should still show up the far right breadcrumb and edit tools option when clicked. I do set the widget area margin spacing for top and bottom to zero, as I like the editing page to be as close as possible to the live frontend view:
[data-apos-area] [data-apos-area] {
margin: 0 !important;
}
Describe the bug
After you click the edit widget option for the widget, the parent is no shown on the page when you click the breadcrumb label.
Details
Version of Node.js:
Apostrophecms V4.7.1, clean install of apostrophecms
Server Operating System:
Mac OSX
Additional context:
Array schema:
// modules/two-column-widget/index.js
module.exports = {
extend: '@apostrophecms/widget-type',
options: {
label: 'Two column',
},
// 👇 The widget type's field schema
fields: {
add: {
columns: {
type: 'array',
label: 'Columns Array',
fields: {
add: {
// 👇 The first column area
columnOne: {
type: 'area',
label: 'Column One',
options: {
widgets: {
'@apostrophecms/rich-text': {},
'@apostrophecms/image': {},
},
},
},
// 👇 The second column area
columnTwo: {
type: 'area',
label: 'Column Two',
options: {
widgets: {
'@apostrophecms/rich-text': {},
'@apostrophecms/image': {},
},
},
},
},
},
},
},
},
};
HTML:
<section class="columns">
{% for col in data.widget.columns %}
<div class="two-col">
<div class="two-col__column">
{% area col, 'columnOne' %}
</div>
{# <div class="two-col__column">
{% area col, 'columnTwo' %}
</div> #}
</div>
{% endfor %}
</section>
<style>
/* modules/two-column-widget/ui/src/index.scss */
.columns {
background: #eee;
margin-bottom: 25px;
padding-bottom: 25px;
border-bottom: 1px solid #000;
}
.two-col {
display: flex;
flex-flow: row wrap;
width: 100%;
}
.two-col__column {
display: flex;
flex-direction: column;
flex: 1;
}
[data-apos-area] [data-apos-area] {
margin: 0 !important;
}
</style>