Skip to content

Commit 48dfd34

Browse files
ilhan007ilhan007
committed
fix(ui5-input): Fix JS error thrown in IE (#2022)
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
1 parent f3b0567 commit 48dfd34

File tree

4 files changed

+126
-140
lines changed

4 files changed

+126
-140
lines changed

‎packages/main/src/features/InputSuggestions.js

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -144,13 +144,14 @@ class Suggestions {
144144
}
145145

146146
onItemSelected(selectedItem, keyboardUsed) {
147-
const item = selectedItem || this._getItems()[this.selectedItemIndex];
147+
const allItems = this._getItems();
148+
const item = selectedItem || allItems[this.selectedItemIndex];
148149

149-
this.selectedItemIndex = this._getItems().indexOf(item);
150+
this.selectedItemIndex = allItems.indexOf(item);
150151

151152
this.accInfo = {
152153
currentPos: this.selectedItemIndex + 1,
153-
listSize: this._getItems().length,
154+
listSize: allItems.length,
154155
itemText: item.textContent,
155156
};
156157

@@ -318,7 +319,7 @@ class Suggestions {
318319
}
319320

320321
_getItems() {
321-
return [...this.responsivePopover.querySelectorAll("ui5-list>*")];
322+
return [...this.responsivePopover.querySelector("ui5-list").children];
322323
}
323324

324325
_getComponent() {

‎packages/main/test/pages/Input.html

Lines changed: 1 addition & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -40,48 +40,6 @@ <h3>Input in Compact</h3>
4040
</ui5-input>
4141
</div>
4242

43-
<h3> Input suggestions with ui5-suggestion-item</h3>
44-
45-
<div style="width: 200px">Test keyup</div>
46-
<ui5-input id="keyupResult" style="width: 100%"></ui5-input>
47-
<br><br>
48-
49-
<div style="width: 200px">Test suggestion-item-preview</div>
50-
<ui5-input id="inputItemPreviewRes" style="width:100%"></ui5-input>
51-
<br><br>
52-
53-
<div style="width: 200px">Test mouseover on item</div>
54-
<ui5-input id="mouseoverResult" style="width: 100%"></ui5-input>
55-
<br><br>
56-
57-
<div style="width: 200px">Test mouseout on item</div>
58-
<ui5-input id="mouseoutResult" style="width:100%"></ui5-input>
59-
<br><br>
60-
61-
<ui5-input id="inputPreview" show-suggestions style="width: 200px">
62-
<ui5-suggestion-item class="suggestionItem" text="Laptop Lenovo"></ui5-suggestion-item>
63-
<ui5-suggestion-item class="suggestionItem" text="HP Monitor 24"></ui5-suggestion-item>
64-
<ui5-suggestion-item class="suggestionItem" text="IPhone 6s"></ui5-suggestion-item>
65-
<ui5-suggestion-item class="suggestionItem" text="Dell"></ui5-suggestion-item>
66-
<ui5-suggestion-item class="suggestionItem" text="IPad Air"></ui5-suggestion-item>
67-
</ui5-input>
68-
69-
<ui5-popover id="quickViewCard" no-arrow placement-type="Right" height="500px">
70-
<ui5-input id="searchInput" style="width: 300px">
71-
<ui5-icon id="searchIcon" slot="icon" name="search"></ui5-icon>
72-
</ui5-input>
73-
<ui5-list style="height: 400px">
74-
<ui5-li-groupheader>Actions</ui5-li-groupheader>
75-
<ui5-li>Delete Product</ui5-li>
76-
<ui5-li>Audit Log Settings</ui5-li>
77-
<ui5-li>OData API Audit</ui5-li>
78-
<ui5-li-groupheader>Products</ui5-li-groupheader>
79-
<ui5-li image="./img/HT-1010.jpg" icon="navigation-right-arrow" info="Re-stock" description="#12331232131" info-state="Error">Laptop Lenovo</ui5-li>
80-
<ui5-li image="./img/HT-1022.jpg" icon="navigation-right-arrow" info="Re-stock" description="#12331232131" info-state="Error">IPhone 3</ui5-li>
81-
<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>
82-
</ui5-list>
83-
</ui5-popover>
84-
8543
<br/>
8644
<br/>
8745
<h3>Input suggestions with ui5-li</h3>
@@ -345,7 +303,7 @@ <h3>Test width of suggestions popover</h3>
345303

346304
var suggestionSelectedCounterWithGrouping = 0;
347305

348-
var suggest = async function (event) {
306+
var suggest = function (event) {
349307
var input = event.target;
350308
var value = input.value;
351309
var suggestionItems = [];
@@ -373,14 +331,6 @@ <h3>Test width of suggestions popover</h3>
373331
});
374332

375333
labelLiveChange.innerHTML = "Event [input] :: " + value;
376-
377-
// wait the DOM update
378-
await window.RenderScheduler.whenFinished();
379-
380-
// check if the suggestions popup is scrollable
381-
const scrollable = await input.isSuggestionsScrollable();
382-
383-
console.log("Suggestions are scrollable", scrollable);
384334
};
385335

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

440-
// Quick View Card sample
441-
var focusQuickView = false;
442-
443-
inputPreview.addEventListener("ui5-suggestion-item-preview", function (event) {
444-
var item = event.detail.targetRef;
445-
quickViewCard.close();
446-
quickViewCard.openBy(item, true /* preventInitialFocus */);
447-
448-
// log info
449-
inputItemPreviewRes.value = item.textContent;
450-
console.log("suggestion-item-preview", item);
451-
});
452-
453-
inputPreview.addEventListener("keyup", async function (event) {
454-
const item = event.target.previewItem;
455-
const combination = event.key === "1";
456-
457-
if (combination) {
458-
focusQuickView = true;
459-
await RenderScheduler.whenFinished();
460-
quickViewCard.applyFocus();
461-
console.log("set focus to quickcard");
462-
}
463-
464-
// log info
465-
keyupResult.value = event.key + " on item: " + (item && item.text);
466-
console.log("keyup", event.key);
467-
});
468-
469-
[].slice.call(document.querySelectorAll(".suggestionItem")).forEach(function(el) {
470-
el.addEventListener("mouseover", function (event) {
471-
const targetRef = event.detail.targetRef;
472-
quickViewCard.close();
473-
quickViewCard.openBy(targetRef, true /* preventInitialFocus */);
474-
475-
// log info
476-
mouseoverResult.value = targetRef.textContent;
477-
console.log("mouseover");
478-
});
479-
480-
el.addEventListener("mouseout", function (event) {
481-
});
482-
});
483-
484-
inputPreview.addEventListener("ui5-suggestion-scroll", function (event) {
485-
console.log("scroll", { scrolltop: event.detail.scrollTop });
486-
});
487-
488-
quickViewCard.addEventListener("ui5-before-close", async event => {
489-
const esc = event.detail.escPressed;
490-
491-
if (esc) {
492-
await RenderScheduler.whenFinished();
493-
inputPreview.focus();
494-
}
495-
});
496-
497390
scrollInput.addEventListener("ui5-suggestion-scroll", function (event) {
498391
scrollResult.value = event.detail.scrollTop;
499392
console.log("scroll", { scrolltop: event.detail.scrollTop, container: event.detail.scrollContainer });

‎packages/main/test/pages/Input_quickview.html

Lines changed: 91 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,49 @@ <h1> Quick View sample</h1>
5555
<div style="display: flex; align-items: center">
5656
<ui5-label>focusable element: </ui5-label><ui5-button>after</ui5-button>
5757
</div>
58+
59+
<h1> Test Quick View sample</h1>
60+
61+
<ui5-input id="inputPreview2" show-suggestions style="width: 200px">
62+
<ui5-suggestion-item class="suggestionItem" text="Laptop Lenovo"></ui5-suggestion-item>
63+
<ui5-suggestion-item class="suggestionItem" text="HP Monitor 24"></ui5-suggestion-item>
64+
<ui5-suggestion-item class="suggestionItem" text="IPhone 6s"></ui5-suggestion-item>
65+
<ui5-suggestion-item class="suggestionItem" text="Dell"></ui5-suggestion-item>
66+
<ui5-suggestion-item class="suggestionItem" text="IPad Air"></ui5-suggestion-item>
67+
</ui5-input>
68+
<br><br>
69+
70+
<div style="width: 200px">Test keyup</div>
71+
<ui5-input id="keyupResult" style="width: 100%"></ui5-input>
72+
<br><br>
73+
74+
<div style="width: 200px">Test suggestion-item-preview</div>
75+
<ui5-input id="suggestionItemPreviewRes" style="width:100%"></ui5-input>
76+
<br><br>
77+
78+
<div style="width: 200px">Test mouseover on item</div>
79+
<ui5-input id="mouseoverResult" style="width: 100%"></ui5-input>
80+
81+
<ui5-popover id="quickViewCard2" no-arrow placement-type="Right" height="500px">
82+
<ui5-input id="searchInput2" style="width: 300px">
83+
<ui5-icon id="searchIcon" slot="icon" name="search"></ui5-icon>
84+
</ui5-input>
85+
<ui5-list style="height: 400px">
86+
<ui5-li-groupheader>Actions</ui5-li-groupheader>
87+
<ui5-li>Delete Product</ui5-li>
88+
<ui5-li>Audit Log Settings</ui5-li>
89+
<ui5-li>OData API Audit</ui5-li>
90+
<ui5-li-groupheader>Products</ui5-li-groupheader>
91+
<ui5-li image="./img/HT-1010.jpg" icon="navigation-right-arrow" info="Re-stock" description="#12331232131" info-state="Error">Laptop Lenovo</ui5-li>
92+
<ui5-li image="./img/HT-1022.jpg" icon="navigation-right-arrow" info="Re-stock" description="#12331232131" info-state="Error">IPhone 3</ui5-li>
93+
<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>
94+
</ui5-list>
95+
</ui5-popover>
96+
5897
<script>
98+
/*
99+
* QuickviewCard Sample #1
100+
*/
59101
var focusQuickView = false;
60102

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

@@ -107,6 +149,54 @@ <h1> Quick View sample</h1>
107149
inputPreview.focus();
108150
}
109151
});
152+
153+
/*
154+
* QuickviewCard Test markup
155+
*/
156+
var focusQuickView2 = false;
157+
158+
inputPreview2.addEventListener("ui5-suggestion-item-preview", function (event) {
159+
var item = event.detail.targetRef;
160+
quickViewCard2.close();
161+
quickViewCard2.openBy(item, true /* preventInitialFocus */);
162+
163+
// log info
164+
suggestionItemPreviewRes.value = item.textContent;
165+
});
166+
167+
inputPreview2.addEventListener("keyup", async function (event) {
168+
const item = event.target.previewItem;
169+
const combination = event.key === "1";
170+
171+
if (combination) {
172+
focusQuickView2 = true;
173+
await RenderScheduler.whenFinished();
174+
quickViewCard2.applyFocus();
175+
}
176+
177+
// log info
178+
keyupResult.value = event.key + " on item: " + (item && item.text);
179+
});
180+
181+
[].slice.call(document.querySelectorAll("#inputPreview2 .suggestionItem")).forEach(function(el) {
182+
el.addEventListener("mouseover", function (event) {
183+
const targetRef = event.detail.targetRef;
184+
quickViewCard2.close();
185+
quickViewCard2.openBy(targetRef, true /* preventInitialFocus */);
186+
187+
// log info
188+
mouseoverResult.value = targetRef.textContent;
189+
});
190+
});
191+
192+
quickViewCard2.addEventListener("ui5-before-close", async event => {
193+
const esc = event.detail.escPressed;
194+
195+
if (esc) {
196+
await RenderScheduler.whenFinished();
197+
inputPreview2.focus();
198+
}
199+
});
110200
</script>
111201
</body>
112202
</html>

‎packages/main/test/specs/Input.spec.js

Lines changed: 29 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -129,33 +129,6 @@ describe("Input general interaction", () => {
129129
assert.strictEqual(inputChangeResult.getValue(), "2", "change is called twice");
130130
});
131131

132-
it("fires suggestion-item-preview", () => {
133-
const inputItemPreview = $("#inputPreview").shadow$("input");
134-
const inputItemPreviewRes = $("#inputItemPreviewRes");
135-
const EXPECTED_PREVIEW_ITEM_TEXT = "Laptop Lenovo";
136-
137-
// act
138-
inputItemPreview.click();
139-
inputItemPreview.keys("ArrowDown");
140-
141-
// assert
142-
const staticAreaItemClassName = browser.getStaticAreaItemClassName("#inputPreview");
143-
const inputPopover = browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
144-
const helpPopover = browser.$("#quickViewCard");
145-
146-
assert.strictEqual(inputItemPreviewRes.getValue(), EXPECTED_PREVIEW_ITEM_TEXT, "First item has been previewed");
147-
assert.ok(helpPopover.isDisplayedInViewport(), "The help popover is open.");
148-
assert.ok(inputPopover.isDisplayedInViewport(), "The input popover is open.");
149-
150-
// act
151-
const inputInHelpPopover = browser.$("#searchInput").shadow$("input");
152-
inputInHelpPopover.click();
153-
154-
// assert
155-
assert.notOk(inputPopover.isDisplayedInViewport(), "The inpuit popover is closed as it lost the focus.");
156-
assert.ok(helpPopover.isDisplayedInViewport(), "The help popover remains open as the focus is within.");
157-
});
158-
159132
it("fires suggestion-scroll event", () => {
160133
const input = $("#scrollInput").shadow$("input");
161134
const scrollResult = $("#scrollResult");
@@ -321,4 +294,33 @@ describe("Input general interaction", () => {
321294
assert.ok(respPopover.isDisplayedInViewport(), "The popover is visible");
322295
assert.ok(firstListItem.getHTML().indexOf(EXPTECTED_TEXT) !== -1, "The suggestions is highlighted.")
323296
});
297+
298+
it("fires suggestion-item-preview", () => {
299+
browser.url("http://localhost:8080/test-resources/pages/Input_quickview.html");
300+
301+
const inputItemPreview = $("#inputPreview2").shadow$("input");
302+
const suggestionItemPreviewRes = $("#suggestionItemPreviewRes");
303+
const EXPECTED_PREVIEW_ITEM_TEXT = "Laptop Lenovo";
304+
305+
// act
306+
inputItemPreview.click();
307+
inputItemPreview.keys("ArrowDown");
308+
309+
// assert
310+
const staticAreaItemClassName = browser.getStaticAreaItemClassName("#inputPreview2");
311+
const inputPopover = browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
312+
const helpPopover = browser.$("#quickViewCard2");
313+
314+
assert.strictEqual(suggestionItemPreviewRes.getValue(), EXPECTED_PREVIEW_ITEM_TEXT, "First item has been previewed");
315+
assert.ok(helpPopover.isDisplayedInViewport(), "The help popover is open.");
316+
assert.ok(inputPopover.isDisplayedInViewport(), "The input popover is open.");
317+
318+
// act
319+
const inputInHelpPopover = browser.$("#searchInput2").shadow$("input");
320+
inputInHelpPopover.click();
321+
322+
// assert
323+
assert.notOk(inputPopover.isDisplayedInViewport(), "The inpuit popover is closed as it lost the focus.");
324+
assert.ok(helpPopover.isDisplayedInViewport(), "The help popover remains open as the focus is within.");
325+
});
324326
});

0 commit comments

Comments
 (0)