Skip to content

Commit

Permalink
fix(ui5-input): Fix JS error thrown in IE (#2022)
Browse files Browse the repository at this point in the history 
For some reason the statement "this.responsivePopover.querySelectorAll("ui5-list>*") always returns an empty array in IE, later leading to a JS error, when element from that array had to be accessed, so I had to tweak it a little bit.

FIXES: #2019
  • Loading branch information
@ilhan007
ilhan007 committed Jul 28, 2020
1 parent f3b0567 commit 48dfd34
Show file tree
Hide file tree
Showing 4 changed files with 126 additions and 140 deletions.
9 changes: 5 additions & 4 deletions packages/main/src/features/InputSuggestions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,13 +144,14 @@ class Suggestions {
}

onItemSelected(selectedItem, keyboardUsed) {
const item = selectedItem || this._getItems()[this.selectedItemIndex];
const allItems = this._getItems();
const item = selectedItem || allItems[this.selectedItemIndex];

this.selectedItemIndex = this._getItems().indexOf(item);
this.selectedItemIndex = allItems.indexOf(item);

this.accInfo = {
currentPos: this.selectedItemIndex + 1,
listSize: this._getItems().length,
listSize: allItems.length,
itemText: item.textContent,
};

Expand Down Expand Up @@ -318,7 +319,7 @@ class Suggestions {
}

_getItems() {
return [...this.responsivePopover.querySelectorAll("ui5-list>*")];
return [...this.responsivePopover.querySelector("ui5-list").children];
}

_getComponent() {
Expand Down
109 changes: 1 addition & 108 deletions packages/main/test/pages/Input.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,48 +40,6 @@ <h3>Input in Compact</h3>
</ui5-input>
</div>

<h3> Input suggestions with ui5-suggestion-item</h3>

<div style="width: 200px">Test keyup</div>
<ui5-input id="keyupResult" style="width: 100%"></ui5-input>
<br><br>

<div style="width: 200px">Test suggestion-item-preview</div>
<ui5-input id="inputItemPreviewRes" style="width:100%"></ui5-input>
<br><br>

<div style="width: 200px">Test mouseover on item</div>
<ui5-input id="mouseoverResult" style="width: 100%"></ui5-input>
<br><br>

<div style="width: 200px">Test mouseout on item</div>
<ui5-input id="mouseoutResult" style="width:100%"></ui5-input>
<br><br>

<ui5-input id="inputPreview" show-suggestions style="width: 200px">
<ui5-suggestion-item class="suggestionItem" text="Laptop Lenovo"></ui5-suggestion-item>
<ui5-suggestion-item class="suggestionItem" text="HP Monitor 24"></ui5-suggestion-item>
<ui5-suggestion-item class="suggestionItem" text="IPhone 6s"></ui5-suggestion-item>
<ui5-suggestion-item class="suggestionItem" text="Dell"></ui5-suggestion-item>
<ui5-suggestion-item class="suggestionItem" text="IPad Air"></ui5-suggestion-item>
</ui5-input>

<ui5-popover id="quickViewCard" no-arrow placement-type="Right" height="500px">
<ui5-input id="searchInput" style="width: 300px">
<ui5-icon id="searchIcon" slot="icon" name="search"></ui5-icon>
</ui5-input>
<ui5-list style="height: 400px">
<ui5-li-groupheader>Actions</ui5-li-groupheader>
<ui5-li>Delete Product</ui5-li>
<ui5-li>Audit Log Settings</ui5-li>
<ui5-li>OData API Audit</ui5-li>
<ui5-li-groupheader>Products</ui5-li-groupheader>
<ui5-li image="./img/HT-1010.jpg" icon="navigation-right-arrow" info="Re-stock" description="#12331232131" info-state="Error">Laptop Lenovo</ui5-li>
<ui5-li image="./img/HT-1022.jpg" icon="navigation-right-arrow" info="Re-stock" description="#12331232131" info-state="Error">IPhone 3</ui5-li>
<ui5-li image="./img/HT-1030.jpg" icon-end icon="navigation-right-arrow" description="#12331232131" info="Reuqired" info-state="Error">HP Monitor 24</ui5-li>
</ui5-list>
</ui5-popover>

<br/>
<br/>
<h3>Input suggestions with ui5-li</h3>
Expand Down Expand Up @@ -345,7 +303,7 @@ <h3>Test width of suggestions popover</h3>

var suggestionSelectedCounterWithGrouping = 0;

var suggest = async function (event) {
var suggest = function (event) {
var input = event.target;
var value = input.value;
var suggestionItems = [];
Expand Down Expand Up @@ -373,14 +331,6 @@ <h3>Test width of suggestions popover</h3>
});

labelLiveChange.innerHTML = "Event [input] :: " + value;

// wait the DOM update
await window.RenderScheduler.whenFinished();

// check if the suggestions popup is scrollable
const scrollable = await input.isSuggestionsScrollable();

console.log("Suggestions are scrollable", scrollable);
};

input.addEventListener("ui5-input", suggest);
Expand Down Expand Up @@ -437,63 +387,6 @@ <h3>Test width of suggestions popover</h3>
inputChangeResult.value = ++inputChangeResultCounter;
});

// Quick View Card sample
var focusQuickView = false;

inputPreview.addEventListener("ui5-suggestion-item-preview", function (event) {
var item = event.detail.targetRef;
quickViewCard.close();
quickViewCard.openBy(item, true /* preventInitialFocus */);

// log info
inputItemPreviewRes.value = item.textContent;
console.log("suggestion-item-preview", item);
});

inputPreview.addEventListener("keyup", async function (event) {
const item = event.target.previewItem;
const combination = event.key === "1";

if (combination) {
focusQuickView = true;
await RenderScheduler.whenFinished();
quickViewCard.applyFocus();
console.log("set focus to quickcard");
}

// log info
keyupResult.value = event.key + " on item: " + (item && item.text);
console.log("keyup", event.key);
});

[].slice.call(document.querySelectorAll(".suggestionItem")).forEach(function(el) {
el.addEventListener("mouseover", function (event) {
const targetRef = event.detail.targetRef;
quickViewCard.close();
quickViewCard.openBy(targetRef, true /* preventInitialFocus */);

// log info
mouseoverResult.value = targetRef.textContent;
console.log("mouseover");
});

el.addEventListener("mouseout", function (event) {
});
});

inputPreview.addEventListener("ui5-suggestion-scroll", function (event) {
console.log("scroll", { scrolltop: event.detail.scrollTop });
});

quickViewCard.addEventListener("ui5-before-close", async event => {
const esc = event.detail.escPressed;

if (esc) {
await RenderScheduler.whenFinished();
inputPreview.focus();
}
});

scrollInput.addEventListener("ui5-suggestion-scroll", function (event) {
scrollResult.value = event.detail.scrollTop;
console.log("scroll", { scrolltop: event.detail.scrollTop, container: event.detail.scrollContainer });
Expand Down
92 changes: 91 additions & 1 deletion packages/main/test/pages/Input_quickview.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,49 @@ <h1> Quick View sample</h1>
<div style="display: flex; align-items: center">
<ui5-label>focusable element: </ui5-label><ui5-button>after</ui5-button>
</div>

<h1> Test Quick View sample</h1>

<ui5-input id="inputPreview2" show-suggestions style="width: 200px">
<ui5-suggestion-item class="suggestionItem" text="Laptop Lenovo"></ui5-suggestion-item>
<ui5-suggestion-item class="suggestionItem" text="HP Monitor 24"></ui5-suggestion-item>
<ui5-suggestion-item class="suggestionItem" text="IPhone 6s"></ui5-suggestion-item>
<ui5-suggestion-item class="suggestionItem" text="Dell"></ui5-suggestion-item>
<ui5-suggestion-item class="suggestionItem" text="IPad Air"></ui5-suggestion-item>
</ui5-input>
<br><br>

<div style="width: 200px">Test keyup</div>
<ui5-input id="keyupResult" style="width: 100%"></ui5-input>
<br><br>

<div style="width: 200px">Test suggestion-item-preview</div>
<ui5-input id="suggestionItemPreviewRes" style="width:100%"></ui5-input>
<br><br>

<div style="width: 200px">Test mouseover on item</div>
<ui5-input id="mouseoverResult" style="width: 100%"></ui5-input>

<ui5-popover id="quickViewCard2" no-arrow placement-type="Right" height="500px">
<ui5-input id="searchInput2" style="width: 300px">
<ui5-icon id="searchIcon" slot="icon" name="search"></ui5-icon>
</ui5-input>
<ui5-list style="height: 400px">
<ui5-li-groupheader>Actions</ui5-li-groupheader>
<ui5-li>Delete Product</ui5-li>
<ui5-li>Audit Log Settings</ui5-li>
<ui5-li>OData API Audit</ui5-li>
<ui5-li-groupheader>Products</ui5-li-groupheader>
<ui5-li image="./img/HT-1010.jpg" icon="navigation-right-arrow" info="Re-stock" description="#12331232131" info-state="Error">Laptop Lenovo</ui5-li>
<ui5-li image="./img/HT-1022.jpg" icon="navigation-right-arrow" info="Re-stock" description="#12331232131" info-state="Error">IPhone 3</ui5-li>
<ui5-li image="./img/HT-1030.jpg" icon-end icon="navigation-right-arrow" description="#12331232131" info="Reuqired" info-state="Error">HP Monitor 24</ui5-li>
</ui5-list>
</ui5-popover>

<script>
/*
* QuickviewCard Sample #1
*/
var focusQuickView = false;

/*
Expand All @@ -71,7 +113,7 @@ <h1> Quick View sample</h1>
/*
* Toggle quickviewCard on mouseover/mouseout
*/
[].slice.call(document.querySelectorAll(".suggestionItem")).forEach(function(el) {
[].slice.call(document.querySelectorAll("#inputPreview .suggestionItem")).forEach(function(el) {
el.addEventListener("mouseover", function (event) {
const targetRef = event.detail.targetRef;

Expand Down Expand Up @@ -107,6 +149,54 @@ <h1> Quick View sample</h1>
inputPreview.focus();
}
});

/*
* QuickviewCard Test markup
*/
var focusQuickView2 = false;

inputPreview2.addEventListener("ui5-suggestion-item-preview", function (event) {
var item = event.detail.targetRef;
quickViewCard2.close();
quickViewCard2.openBy(item, true /* preventInitialFocus */);

// log info
suggestionItemPreviewRes.value = item.textContent;
});

inputPreview2.addEventListener("keyup", async function (event) {
const item = event.target.previewItem;
const combination = event.key === "1";

if (combination) {
focusQuickView2 = true;
await RenderScheduler.whenFinished();
quickViewCard2.applyFocus();
}

// log info
keyupResult.value = event.key + " on item: " + (item && item.text);
});

[].slice.call(document.querySelectorAll("#inputPreview2 .suggestionItem")).forEach(function(el) {
el.addEventListener("mouseover", function (event) {
const targetRef = event.detail.targetRef;
quickViewCard2.close();
quickViewCard2.openBy(targetRef, true /* preventInitialFocus */);

// log info
mouseoverResult.value = targetRef.textContent;
});
});

quickViewCard2.addEventListener("ui5-before-close", async event => {
const esc = event.detail.escPressed;

if (esc) {
await RenderScheduler.whenFinished();
inputPreview2.focus();
}
});
</script>
</body>
</html>
56 changes: 29 additions & 27 deletions packages/main/test/specs/Input.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,33 +129,6 @@ describe("Input general interaction", () => {
assert.strictEqual(inputChangeResult.getValue(), "2", "change is called twice");
});

it("fires suggestion-item-preview", () => {
const inputItemPreview = $("#inputPreview").shadow$("input");
const inputItemPreviewRes = $("#inputItemPreviewRes");
const EXPECTED_PREVIEW_ITEM_TEXT = "Laptop Lenovo";

// act
inputItemPreview.click();
inputItemPreview.keys("ArrowDown");

// assert
const staticAreaItemClassName = browser.getStaticAreaItemClassName("#inputPreview");
const inputPopover = browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
const helpPopover = browser.$("#quickViewCard");

assert.strictEqual(inputItemPreviewRes.getValue(), EXPECTED_PREVIEW_ITEM_TEXT, "First item has been previewed");
assert.ok(helpPopover.isDisplayedInViewport(), "The help popover is open.");
assert.ok(inputPopover.isDisplayedInViewport(), "The input popover is open.");

// act
const inputInHelpPopover = browser.$("#searchInput").shadow$("input");
inputInHelpPopover.click();

// assert
assert.notOk(inputPopover.isDisplayedInViewport(), "The inpuit popover is closed as it lost the focus.");
assert.ok(helpPopover.isDisplayedInViewport(), "The help popover remains open as the focus is within.");
});

it("fires suggestion-scroll event", () => {
const input = $("#scrollInput").shadow$("input");
const scrollResult = $("#scrollResult");
Expand Down Expand Up @@ -321,4 +294,33 @@ describe("Input general interaction", () => {
assert.ok(respPopover.isDisplayedInViewport(), "The popover is visible");
assert.ok(firstListItem.getHTML().indexOf(EXPTECTED_TEXT) !== -1, "The suggestions is highlighted.")
});

it("fires suggestion-item-preview", () => {
browser.url("http://localhost:8080/test-resources/pages/Input_quickview.html");

const inputItemPreview = $("#inputPreview2").shadow$("input");
const suggestionItemPreviewRes = $("#suggestionItemPreviewRes");
const EXPECTED_PREVIEW_ITEM_TEXT = "Laptop Lenovo";

// act
inputItemPreview.click();
inputItemPreview.keys("ArrowDown");

// assert
const staticAreaItemClassName = browser.getStaticAreaItemClassName("#inputPreview2");
const inputPopover = browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
const helpPopover = browser.$("#quickViewCard2");

assert.strictEqual(suggestionItemPreviewRes.getValue(), EXPECTED_PREVIEW_ITEM_TEXT, "First item has been previewed");
assert.ok(helpPopover.isDisplayedInViewport(), "The help popover is open.");
assert.ok(inputPopover.isDisplayedInViewport(), "The input popover is open.");

// act
const inputInHelpPopover = browser.$("#searchInput2").shadow$("input");
inputInHelpPopover.click();

// assert
assert.notOk(inputPopover.isDisplayedInViewport(), "The inpuit popover is closed as it lost the focus.");
assert.ok(helpPopover.isDisplayedInViewport(), "The help popover remains open as the focus is within.");
});
});

0 comments on commit 48dfd34

Please sign in to comment.