Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(ui5-input): Fix JS error thrown in IE #2022

Merged
merged 3 commits into from
Jul 28, 2020
+126 −140
Merged

fix(ui5-input): Fix JS error thrown in IE #2022

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f0bf48b
fix(ui5-input): Fix JS error thrown in IE
ilhan007 Jul 28, 2020
25452d2
Merge branch 'master' into fix-js-error
ilhan007 Jul 28, 2020
32905f7
make items selector more general
ilhan007 Jul 28, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions packages/main/src/features/InputSuggestions.js
View file
Open in desktop
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.querySelectorAll("ui5-li-suggestion-item, ui5-li-groupheader")];
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The reason I put >* before was that with the new hooks, people could create their own implementation with f.e. ui5-li-custom. At least add it here, if it is not possible to reliably get the children.

But before that, please try with:

[...this.responsivePopover.querySelector("ui5-list").children]

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see, I tried it and it works this way as well

}

_getComponent() {
Expand Down
109 changes: 1 addition & 108 deletions packages/main/test/pages/Input.html
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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.");
});
});