Skip to content

Commit

Permalink
fix: make static are items recognizable to openui5 dialogs (#5888)
Browse files Browse the repository at this point in the history
Issue
When UI5WC ui5-date-picker is opened inside UI5 dialog, click "ESC" wrongly close whole dialog.

Root cause
It's an integration issue between UI5WC Popups and OpenUI5 Popups - the focus never gets to the DatePicker's popover as it's not recognized as an external content by the sap.m.Dialog.

Solution
While we are working on more general, out of the box solution by integrating UI5WC Popups and OpenUI5 Popups, we would like to provide the following solution for the time being:

Forwarding the "data-sap-ui-integration-popup-content" attribute from the component that opens popup to its the static are item, which makes the static are item an external content for the sap.m.Dialog (as the aforementioned attribute is already part of the OpenUI5 logic). When the attribute is present, the focus goes inside the DatePicker's popover and the ESC behaviour works as expected.

Related to: #5634
  • Loading branch information
ilhan007 authored Oct 7, 2022
1 parent f30d370 commit efaa1d6
Showing 3 changed files with 53 additions and 14 deletions.
8 changes: 7 additions & 1 deletion packages/base/src/StaticAreaItem.js
Original file line number Diff line number Diff line change
@@ -17,6 +17,7 @@ class StaticAreaItem extends HTMLElement {
this._rendered = false;
this.attachShadow({ mode: "open" });
this.pureTagName = "ui5-static-area-item";
this.popupIntegrationAttr = "data-sap-ui-integration-popup-content";
}

/**
@@ -37,7 +38,7 @@ class StaticAreaItem extends HTMLElement {
*/
update() {
if (this._rendered) {
this.setAttribute(this.pureTagName, "");
this._updateAdditionalAttrs();
this._updateContentDensity();
this._updateDirection();
updateShadowRoot(this.ownerElement, true);
@@ -67,6 +68,11 @@ class StaticAreaItem extends HTMLElement {
}
}

_updateAdditionalAttrs() {
this.setAttribute(this.pureTagName, "");
this.setAttribute(this.popupIntegrationAttr, "");
}

/**
* @protected
* Returns reference to the DOM element where the current fragment is added.
55 changes: 42 additions & 13 deletions packages/main/test/pages/OpenUI5.html
Original file line number Diff line number Diff line change
@@ -4,23 +4,54 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta charset="utf-8">

<title>Button</title>
<title>OpenUI5 + UI5 Web Components</title>

<script id='sap-ui-bootstrap'
src='https://sdk.openui5.org/resources/sap-ui-core.js'
data-sap-ui-theme='sap_belize_hcb'
data-sap-ui-libs='sap.m'
data-sap-ui-libs='sap.m, sap.ui.core'
data-sap-ui-preload="async"
></script>

<script>
sap.ui.getCore().attachInit(function() {
var btn = new sap.m.Button({
text:'OpenUI5',
const dialog = new sap.m.Dialog({
content: [
new sap.ui.core.HTML({
content: '<ui5-date-picker id="myDatepicker" value="Aug 14, 2018" data-sap-ui-integration-popup-content></ui5-date-picker>'
}),
]
});

const dialog2 = new sap.m.Dialog({
content: [
new sap.ui.core.HTML({
content: '<ui5-calendar id="myCalendar" value="Aug 14, 2018"></ui5-calendar>'
}),
]
});

const btn = new sap.m.Button({
text: "DialogWithDatePicker",
press: function() {
dialog.open();
},
});

const btn2 = new sap.m.Button({
text: "DialogWithCalendar",
press: function() {
alert("Hello!")
}
dialog2.open();
},
});
btn.placeAt('content');

const page = new sap.m.Page({
content: [
dialog, dialog2, btn, btn2
],
});

page.placeAt('content');
});
</script>

@@ -35,18 +66,16 @@
}
</script>


<script src="../../bundle.esm.js" type="module"></script>

<link rel="stylesheet" type="text/css" href="./styles/OpenUI5.css">
<link rel="stylesheet" type="text/css" href="./styles/OpenUI5.css">
</head>

<body class="openui51auto">

<ui5-button icon="download">Web Component</ui5-button>
<ui5-datepicker></ui5-datepicker>

<div id='content'></div>
<ui5-button icon="download">Web Component</ui5-button>
<ui5-datepicker></ui5-datepicker>

<div id='content'></div>
</body>
</html>
4 changes: 4 additions & 0 deletions packages/main/test/pages/styles/OpenUI5.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
html, body, #content {
height: 100%;
}

.openui51auto {
background-color: var(--sapBackgroundColor);
}

0 comments on commit efaa1d6

Please sign in to comment.