Skip to content

Commit

Permalink
fix(ui5-busy-indicator): Improve delay handling (#4321)
Browse files Browse the repository at this point in the history
Don't render focusable elements until the delay has passed
Don't reduce the opacity and prevent actions of the slotted elements until the delay has passed
Fixes: #4108
  • Loading branch information
dimovpetar authored Nov 25, 2021

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent 71fd2a7 commit acb1729
Showing 5 changed files with 42 additions and 9 deletions.
2 changes: 1 addition & 1 deletion packages/main/src/BusyIndicator.hbs
Original file line number Diff line number Diff line change
@@ -26,7 +26,7 @@

<slot></slot>

{{#if active}}
{{#if _isBusy}}
<span data-ui5-focus-redirect tabindex="0" @focusin="{{_redirectFocus}}"></span>
{{/if}}
</div>
5 changes: 2 additions & 3 deletions packages/main/src/BusyIndicator.js
Original file line number Diff line number Diff line change
@@ -98,7 +98,6 @@ const metadata = {
*/
_isBusy: {
type: Boolean,
noAttribute: true,
},
},
};
@@ -231,7 +230,7 @@ class BusyIndicator extends UI5Element {
}

_handleKeydown(event) {
if (!this.active) {
if (!this._isBusy) {
return;
}

@@ -246,7 +245,7 @@ class BusyIndicator extends UI5Element {
}

_preventEvent(event) {
if (this.active) {
if (this._isBusy) {
event.stopImmediatePropagation();
}
}
6 changes: 3 additions & 3 deletions packages/main/src/themes/BusyIndicator.css
Original file line number Diff line number Diff line change
@@ -2,18 +2,18 @@
display: inline-block;
}

:host([active]) {
:host([_is-busy]) {
color: var(--_ui5_busy_indicator_color);
}

:host([active]) :not(.ui5-busy-indicator-root--ie) ::slotted(:not([class^="ui5-busy-indicator-"])) {
:host([_is-busy]) :not(.ui5-busy-indicator-root--ie) ::slotted(:not([class^="ui5-busy-indicator-"])) {
opacity: 0.6;
}

/**
* IE fix: 0.6 makes the content almost invisible, so we set it to 0.95 in IE
*/
:host([active]) .ui5-busy-indicator-root--ie ::slotted(:not([class^="ui5-busy-indicator-"])) {
:host([_is-busy]) .ui5-busy-indicator-root--ie ::slotted(:not([class^="ui5-busy-indicator-"])) {
opacity: 0.95;
}

21 changes: 20 additions & 1 deletion packages/main/test/pages/BusyIndicator.html
Original file line number Diff line number Diff line change
@@ -125,7 +125,7 @@
<br>
<br>

<ui5-busy-indicator id="busy-tree" class="busyindicator8auto">
<ui5-busy-indicator id="busy-tree" class="busyindicator8auto" delay="0">
<ui5-tree id="treeDynamic">
<div slot="header">
<ui5-title>Dynamic tree</ui5-title>
@@ -172,6 +172,20 @@
</ui5-busy-indicator>
</div>
</ui5-dialog>

<br>
<br>
<span>Indicator with delay</span>
<div></div>
<ui5-button id="open-dialog-delayed-indicator">Open dialog</ui5-button>
<ui5-dialog id="dialog-delayed-indicator">
<ui5-busy-indicator id="dialog-delayed-indicator-indicator" delay="5000" >
<span>Will become busy after 5 seconds</span>
<span>Shouldn't attempt to focus the busy indicator</span>
</ui5-busy-indicator>
<ui5-button id="dialog-delayed-indicator-focus-stop">focus stop</ui5-button>
</ui5-dialog>

<script>
document.getElementById("fetch-btn").addEventListener("click", function(event) {
var busyIndicator = document.getElementById("busy-container");
@@ -229,6 +243,11 @@
document.getElementById("open-dialog-active-indicator").addEventListener("click", function () {
document.getElementById("dialog-active-indicator").show();
});

document.getElementById("open-dialog-delayed-indicator").addEventListener("click", function () {
document.getElementById("dialog-delayed-indicator-indicator").active = true;
document.getElementById("dialog-delayed-indicator").show();
});
</script>
</body>

17 changes: 16 additions & 1 deletion packages/main/test/specs/BusyIndicator.spec.js
Original file line number Diff line number Diff line change
@@ -85,11 +85,26 @@ describe("BusyIndicator general interaction", () => {
it("test inactive indicator in dialog - correct element from default slot is focused", async () => {
await browser.$("#open-dialog-inactive-indicator").click();

let activeElement = await browser.getActiveElement();
const activeElement = await browser.getActiveElement();
assert.strictEqual(
await browser.$(activeElement).getAttribute("id"),
await browser.$("#dialog-inactive-indicator-focused-button").getAttribute("id"),
"Correct element from default slot is focused"
);

await browser.keys("Escape");
});

it("delayed indicator in dialog - shouldn't attempt to focus before the indicator is visible", async () => {
await browser.$("#open-dialog-delayed-indicator").click();

const activeElement = await browser.getActiveElement();
assert.strictEqual(
await browser.$(activeElement).getAttribute("id"),
"dialog-delayed-indicator-focus-stop",
"Correct element is focused"
);

await browser.keys("Escape");
});
});

0 comments on commit acb1729

Please sign in to comment.