diff --git a/components/filter/filter-tags.js b/components/filter/filter-tags.js
index c51dba5441b..f10916f4108 100644
--- a/components/filter/filter-tags.js
+++ b/components/filter/filter-tags.js
@@ -51,7 +51,7 @@ class FilterTags extends LocalizeCoreElement(LitElement) {
`;
@@ -88,8 +88,8 @@ class FilterTags extends LocalizeCoreElement(LitElement) {
}
_tagListItemDeleted(e) {
- const filterId = e.target.getAttribute('data-filter-id');
- const filterValueIndex = e.target.getAttribute('data-index');
+ const filterId = e.target.dataset.filterId;
+ const filterValueIndex = e.detail.key;
const filterValue = this._allActiveFilters.get(filterId)[filterValueIndex];
const filter = this._filters.registries.find(filter => filter.id === filterId);
filter.requestFilterValueClear(filterValue.keyObject);
diff --git a/components/tag-list/README.md b/components/tag-list/README.md
index 5aca68d48ec..04834ebb13a 100644
--- a/components/tag-list/README.md
+++ b/components/tag-list/README.md
@@ -37,8 +37,8 @@ The corresponding `*-clear` event must be listened to for whatever component (`d
import '@brightspace-ui/core/components/tag-list/tag-list-item.js';
document.addEventListener('d2l-tag-list-item-clear', (e) => {
+ console.log(`d2l-tag-list-item-clear event dispatched. Key: ${e.detail.key}`);
e.target.parentNode.removeChild(e.target);
- console.log(`d2l-tag-list-item-clear event dispatched. Value: ${e.detail.value}`);
});
document.addEventListener('d2l-tag-list-clear', (e) => {
@@ -50,10 +50,10 @@ The corresponding `*-clear` event must be listened to for whatever component (`d
});
-
-
-
-
+
+
+
+
```
@@ -67,8 +67,8 @@ The `d2l-tag-list-item` provides the appropriate semantics and styling for child
import '@brightspace-ui/core/components/tag-list/tag-list-item.js';
document.addEventListener('d2l-tag-list-item-clear', (e) => {
+ console.log(`d2l-tag-list-item-clear event dispatched. Key: ${e.detail.key}`);
e.target.parentNode.removeChild(e.target);
- console.log(`d2l-tag-list-item-clear event dispatched. Value: ${e.detail.value}`);
});
document.addEventListener('d2l-tag-list-clear', (e) => {
@@ -81,7 +81,7 @@ The `d2l-tag-list-item` provides the appropriate semantics and styling for child
-
+
```
diff --git a/components/tag-list/demo/tag-list.html b/components/tag-list/demo/tag-list.html
index e8bc7626865..4fde1b778f7 100644
--- a/components/tag-list/demo/tag-list.html
+++ b/components/tag-list/demo/tag-list.html
@@ -71,8 +71,8 @@ Clearable Tag List
import { getNextFocusable } from '../../../helpers/focus.js';
document.addEventListener('d2l-tag-list-item-clear', (e) => {
+ console.log(`d2l-tag-list-item-clear event dispatched. Value: ${e.target.text}`);
e.target.parentNode.removeChild(e.target);
- console.log(`d2l-tag-list-item-clear event dispatched. Value: ${e.detail.value}`);
});
document.addEventListener('d2l-tag-list-clear', (e) => {
diff --git a/components/tag-list/tag-list-item-mixin.js b/components/tag-list/tag-list-item-mixin.js
index 09d9f8bb27c..9e7a76cfc5c 100644
--- a/components/tag-list/tag-list-item-mixin.js
+++ b/components/tag-list/tag-list-item-mixin.js
@@ -27,6 +27,11 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
* @type {boolean}
*/
clearable: { type: Boolean },
+ /**
+ * Acts as a unique identifier for the tag in dispatched events
+ * @type {string}
+ */
+ key: { type: String },
/**
* @ignore
*/
@@ -133,6 +138,7 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
this.keyboardTooltipItem = false;
this.keyboardTooltipShown = false;
this._id = getUniqueId();
+ this._displayText = '';
}
firstUpdated(changedProperties) {
@@ -169,12 +175,12 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
_handleClearItem() {
if (!this.clearable) return;
- announce(this.localize('components.tag-list.cleared-item', { value: this.text }));
+ announce(this.localize('components.tag-list.cleared-item', { value: this._displayText }));
/** Dispatched when a user selects to delete an individual tag list item. The consumer must handle the actual element deletion and focus behaviour if there are no remaining list items. */
this.dispatchEvent(new CustomEvent(
'd2l-tag-list-item-clear',
- { bubbles: true, composed: true, detail: { value: this.text } }
+ { bubbles: true, composed: true, detail: { key: this.key } }
));
}
@@ -212,12 +218,10 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
`;
}
- _renderTag(tagContent, options) {
- if (!options) options = {};
+ _renderTag(tagContent, options = {}) {
+ this._displayText = options.displayText || tagContent?.constructor === String ? tagContent : '';
- const buttonText = typeof tagContent === 'object'
- ? this.localize('components.tag-list.clear', { value: '' })
- : this.localize('components.tag-list.clear', { value: tagContent });
+ const buttonText = this.localize('components.tag-list.clear', { value: this._displayText });
const hasDescription = !!options.description;
diff --git a/components/tag-list/test/tag-list-item-mixin-consumer.js b/components/tag-list/test/tag-list-item-mixin-consumer.js
index caf6dac8777..dee7ebbbe71 100644
--- a/components/tag-list/test/tag-list-item-mixin-consumer.js
+++ b/components/tag-list/test/tag-list-item-mixin-consumer.js
@@ -57,7 +57,7 @@ class TagListItemMixinConsumer extends TagListItemMixin(LitElement) {
return html`
- ${this._renderTag(tagContent, { focusableClass: 'd2l-dropdown-opener' })}
+ ${this._renderTag(tagContent, { focusableClass: 'd2l-dropdown-opener', displayText: this.name })}
Custom
`;
diff --git a/components/tag-list/test/tag-list.test.js b/components/tag-list/test/tag-list.test.js
index 6068337779a..8908f2b5fac 100644
--- a/components/tag-list/test/tag-list.test.js
+++ b/components/tag-list/test/tag-list.test.js
@@ -16,9 +16,9 @@ const basicFixture = html`
const clearableFixture = html`
-
-
-
+
+
+
`;
@@ -100,7 +100,7 @@ describe('d2l-tag-list-item', () => {
const childButtonIcon = child.shadowRoot.querySelector('d2l-button-icon');
setTimeout(() => childButtonIcon.click());
const { detail } = await oneEvent(child, 'd2l-tag-list-item-clear');
- expect(detail.value).to.equal('Tag');
+ expect(detail.key).to.equal('tag');
});
it('should dispatch expected event when backspace pressed', async() => {
@@ -111,18 +111,30 @@ describe('d2l-tag-list-item', () => {
child.focus();
setTimeout(() => dispatchKeydownEvent(child, keyCodes.BACKSPACE));
const { detail } = await oneEvent(child, 'd2l-tag-list-item-clear');
- expect(detail.value).to.equal('Another Tag');
+ expect(detail.key).to.equal('another-tag');
});
it('should dispatch expected event when delete pressed', async() => {
const elem = await fixture(clearableFixture);
await waitUntil(() => elem._items, 'List items did not become ready');
+ const child = elem._items[2];
+ child.focus();
+ setTimeout(() => dispatchKeydownEvent(child, keyCodes.DELETE));
+ const { detail } = await oneEvent(child, 'd2l-tag-list-item-clear');
+ expect(detail.key).to.equal('long-tag');
+ });
+
+ it('should dispatch expected event when removed with no key', async() => {
+ const elem = await fixture(clearableFixture);
+ await waitUntil(() => elem._items, 'List items did not become ready');
+
const child = elem._items[3];
+ expect(child.key).to.be.undefined;
child.focus();
setTimeout(() => dispatchKeydownEvent(child, keyCodes.DELETE));
const { detail } = await oneEvent(child, 'd2l-tag-list-item-clear');
- expect(detail.value).to.be.undefined;
+ expect(detail.key).to.be.undefined;
});
});