Skip to content

Commit

Permalink
fix(ui5-list): fix JS error on focusin (#2720)
Browse files Browse the repository at this point in the history
Fixe a JS error that used to thrown upon "focusin" when non-existing DOM elements have been accessed. Those DOM elements are not rendered when there are no list items, which is the example in the referenced issue.

FIXES: #2717
  • Loading branch information
ilhan007 committed Jan 22, 2021
1 parent 014c985 commit b36e54e
Show file tree
Hide file tree
Showing 3 changed files with 31 additions and 3 deletions.
6 changes: 4 additions & 2 deletions packages/main/src/List.js
Original file line number Diff line number Diff line change
Expand Up @@ -586,12 +586,14 @@ class List extends UI5Element {

isForwardElement(node) {
const nodeId = node.id;
const afterElement = this.getAfterElement();
const beforeElement = this.getBeforeElement();

if (this._id === nodeId || this.getBeforeElement().id === nodeId) {
if (this._id === nodeId || (beforeElement && beforeElement.id === nodeId)) {
return true;
}

return this.getAfterElement().id === nodeId;
return afterElement && afterElement.id === nodeId;
}

onItemFocused(event) {
Expand Down
20 changes: 19 additions & 1 deletion packages/main/test/pages/List_test_page.html
Original file line number Diff line number Diff line change
Expand Up @@ -174,6 +174,20 @@ <h2 id="testHeader">Test aria</h2>
</ui5-list>

<ui5-input value="0" id="customListItemEvents"></ui5-input>
<br />
<br />
<ui5-button id="btnOpenPopup">Open popup with List</ui5-button>
<ui5-responsive-popover id="popup" placement-type="Bottom" style="width: 300px;height: 18rem;">
<ui5-list>
<div slot="header">
<ui5-button id="btnInHeader" icon="refresh" />
</div>
</ui5-list>

<ui5-list style="height: 15rem" infinite-scroll no-data-text="No data">
<ui5-li>Test</ui5-li>
</ui5-list>
</ui5-responsive-popover>

<script>
'use strict';
Expand Down Expand Up @@ -249,9 +263,13 @@ <h2 id="testHeader">Test aria</h2>
customListItemEventsValue = 0,
customListItemEventsInput = document.getElementById("customListItemEvents");

ui5List.addEventListener("ui5-item-click", (event) => {
ui5List.addEventListener("ui5-item-click", function(event) {
customListItemEventsInput.value = ++customListItemEventsValue;
});

btnOpenPopup.addEventListener("click", function() {
popup.openBy(btnOpenPopup);
});
</script>
</body>
</html>
8 changes: 8 additions & 0 deletions packages/main/test/specs/List.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -303,4 +303,12 @@ describe("List Tests", () => {

assert.strictEqual(input.getProperty("value"), "0", "item-click event is not fired when the button is pressed.");
});

it("Popover with List opens without errors", () => {
const btnPopupOpener = $("#btnOpenPopup");
const btnInListHeader = $("#btnInHeader");

btnPopupOpener.click();
assert.strictEqual(btnInListHeader.isFocused(), true, "The List header btn is focused.");
});
});

0 comments on commit b36e54e

Please sign in to comment.