extern/egroupware
1
0
Fork 1
mirror of https://github.com/EGroupware/egroupware.git synced 2025-01-27 08:19:45 +01:00
Code Issues Packages Projects Releases Wiki Activity

Et2Select: Fix tags can't be removed

Browse Source
This commit is contained in:
nathan 2023-02-07 10:04:11 -07:00
parent 553c318529
commit 2a3a8a7371
2 changed files with 86 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
api/js/etemplate/Et2Select/Et2Select.ts
View File

@ -211,6 +211,7 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
this._handleMouseWheel = this._handleMouseWheel.bind(this);
this._handleMouseEnter = this._handleMouseEnter.bind(this);
this._handleMouseLeave = this._handleMouseLeave.bind(this);
this.handleTagRemove = this.handleTagRemove.bind(this);
}
connectedCallback()
@ -587,6 +588,24 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
return tag;
}
private handleTagRemove(event : CustomEvent, option)
{
event.stopPropagation();
if(!this.disabled)
{
option.selected = false;
let index = this.value.indexOf(option.value);
if(index > -1)
{
this.value.splice(index, 1);
}
this.dispatchEvent(new CustomEvent('sl-input'));
this.dispatchEvent(new CustomEvent('sl-change'));
this.syncItemsFromValue();
}
}
/**
* Get the icon for the select option
*

72
api/js/etemplate/Et2Select/test/Et2SelectBasic.test.ts
View File

@ -1,3 +1,9 @@
import {Et2Tag} from "../Tag/Et2Tag";
import {assert, elementUpdated, fixture, html, oneEvent} from '@open-wc/testing';
import * as sinon from 'sinon';
import {inputBasicTests} from "../../Et2InputWidget/test/InputBasicTests";
import {Et2Select} from "../Et2Select";
/**
* Test file for Etemplate webComponent Select
*
@ -12,11 +18,6 @@ window.egw = {
webserverUrl: ""
};
import {assert, elementUpdated, fixture, html} from '@open-wc/testing';
import * as sinon from 'sinon';
import {inputBasicTests} from "../../Et2InputWidget/test/InputBasicTests";
import {Et2Select} from "../Et2Select";
let element : Et2Select;
async function before()
@ -59,4 +60,65 @@ describe("Select widget basics", () =>
assert.deepEqual(element.select_options, [], "Unexpected option(s)");
})
});
describe("Multiple", () =>
{
beforeEach(async() =>
{
// Create an element to test with, and wait until it's ready
// @ts-ignore
element = await fixture<Et2Select>(html`
<et2-select label="I'm a select" multiple="true">
<sl-menu-item value="one">One</sl-menu-item>
<sl-menu-item value="two">Two</sl-menu-item>
</et2-select>
`);
element.set_value("one,two");
// Stub egw()
sinon.stub(element, "egw").returns(window.egw);
return element;
});
it("Can remove tags", async() =>
{
assert.equal(element.querySelectorAll("sl-menu-item").length, 2, "Did not find options");
assert.sameMembers(element.value, ["one", "two"]);
let tags = element.shadowRoot.querySelectorAll('.select__tags > *');
// Await tags to render
let tag_updates = []
element.shadowRoot.querySelectorAll(element.tagTag).forEach((t : Et2Tag) => tag_updates.push(t.updateComplete));
await Promise.all(tag_updates);
assert.equal(tags.length, 2);
assert.equal(tags[0].value, "one");
assert.equal(tags[1].value, "two");
// Set up listener
const listener = oneEvent(element, "change");
// Click to remove first tag
let removeButton = tags[0].shadowRoot.querySelector("[part='remove-button']");
assert.exists(removeButton, "Could not find tag remove button");
removeButton.dispatchEvent(new Event("click"));
await listener;
// Wait for widget to update
await element.updateComplete;
tag_updates = []
element.shadowRoot.querySelectorAll(element.tagTag).forEach((t : Et2Tag) => tag_updates.push(t.updateComplete));
await Promise.all(tag_updates);
// Check
assert.sameMembers(element.value, ["two"], "Removing tag did not remove value");
tags = element.shadowRoot.querySelectorAll('.select__tags > *');
assert.equal(tags.length, 1, "Removed tag is still there");
});
});
inputBasicTests(before, "", "select");