Skip to content

Commit

Permalink
feat(ui5-list): support pressing DELETE key (#3226)
Browse files Browse the repository at this point in the history
Add DELETE shortcut key for deleting items when `mode` property is `Delete`. 
Also, remove the delete button from the tab chain.

Related to: #3089
  • Loading branch information
dobrinyonkov authored May 12, 2021
1 parent b90933c commit db04d08
Show file tree
Hide file tree
Showing 3 changed files with 20 additions and 2 deletions.
1 change: 1 addition & 0 deletions packages/main/src/ListItem.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,7 @@
{{#if modeDelete}}
<div class="ui5-li-deletebtn">
<ui5-button
tabindex="-1"
id="{{_id}}-deleteSelectionElement"
design="Transparent"
icon="decline"
Expand Down
6 changes: 5 additions & 1 deletion packages/main/src/ListItem.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
import { isSpace, isEnter, isDelete } from "@ui5/webcomponents-base/dist/Keys.js";
import "@ui5/webcomponents-icons/dist/decline.js";
import "@ui5/webcomponents-icons/dist/edit.js";
import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
Expand Down Expand Up @@ -177,6 +177,10 @@ class ListItem extends ListItemBase {
if (isSpace(event)) {
this.fireItemPress(event);
}

if (this.modeDelete && isDelete(event)) {
this.onDelete();
}
}

_onmousedown(event) {
Expand Down
15 changes: 14 additions & 1 deletion packages/main/test/specs/List.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -172,6 +172,19 @@ describe("List Tests", () => {
assert.equal(browser.$('#lblResult').getHTML(false), "Laptop HP: 1", "itemDelete event was fired for the right item");
});

it("mode: delete. DELETE key press - deletes item", () => {
browser.url(`http://localhost:${PORT}/test-resources/pages/List_test_page.html`);
list.root.setProperty("mode", "Delete");

const firstItem = list.getItem(0);
firstItem.click();

assert.ok(!firstItem.getAttribute("selected"), "item is selected");

firstItem.keys("Delete")
assert.equal(browser.$('#lblResult').getHTML(false), "Laptop HP: 1", "itemDelete event was fired for the right item");
});

it("item size and classed, when an item has both text and description", () => {
const ITEM_WITH_DESCRIPTION_AND_TITLE_HEIGHT = 80;
const firstItem = $("#listWithDesc ui5-li:first-child");
Expand Down Expand Up @@ -355,7 +368,7 @@ describe("List Tests", () => {
assert.strictEqual(item3.getProperty("focused"), true, "disabled item is skipped");
});

it.only('should focus next interactive element if TAB is pressed when focus is on "More" growing button', () => {
it('should focus next interactive element if TAB is pressed when focus is on "More" growing button', () => {
const growingListButton = $('#growingListButton').shadow$("div[load-more-inner]");
const nextInteractiveElement = $('#nextInteractiveElement');

Expand Down

0 comments on commit db04d08

Please sign in to comment.