Add tag-list-item-mixin key, _renderTag options.displayText

components/filter/filter-tags.js

@@ -51,7 +51,7 @@ class FilterTags extends LocalizeCoreElement(LitElement) {
 				<d2l-tag-list-item
 					@d2l-tag-list-item-clear="${this._tagListItemDeleted}"
 					data-filter-id="${filter[0]}"
-					data-index="${index}"
+					key="${index}"
 					text="${value.text}">
 				</d2l-tag-list-item>
 			`;
@@ -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);

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
   });
 </script>
 <d2l-tag-list description="Example Tags" clearable>
-  <d2l-tag-list-item text="Lorem ipsum dolor"></d2l-tag-list-item>
-  <d2l-tag-list-item text="Reprehenderit in voluptate velit esse lorem ipsum dolor"></d2l-tag-list-item>
-  <d2l-tag-list-item text="Sit amet"></d2l-tag-list-item>
-  <d2l-tag-list-item text="Duis aute irure"></d2l-tag-list-item>
+  <d2l-tag-list-item key="lorem-ipsum" text="Lorem ipsum dolor"></d2l-tag-list-item>
+  <d2l-tag-list-item key="reprehenderit" text="Reprehenderit in voluptate velit esse lorem ipsum dolor"></d2l-tag-list-item>
+  <d2l-tag-list-item key="sit-amet" text="Sit amet"></d2l-tag-list-item>
+  <d2l-tag-list-item key="duis-aute-irure" text="Duis aute irure"></d2l-tag-list-item>
 </d2l-tag-list>
 ```
 
@@ -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
 </script>
 
 <d2l-tag-list description="Example Tags" clearable>
-  <d2l-tag-list-item text="Tag"></d2l-tag-list-item>
+  <d2l-tag-list-item key="tag" text="Tag"></d2l-tag-list-item>
 </d2l-tag-list>
 ```
 

components/tag-list/demo/tag-list.html

@@ -71,8 +71,8 @@ <h2>Clearable Tag List</h2>
 					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) => {

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;
 

components/tag-list/test/tag-list-item-mixin-consumer.js

@@ -57,7 +57,7 @@ class TagListItemMixinConsumer extends TagListItemMixin(LitElement) {
 
 		return html`
 			<d2l-dropdown open-on-hover>
-				${this._renderTag(tagContent, { focusableClass: 'd2l-dropdown-opener' })}
+				${this._renderTag(tagContent, { focusableClass: 'd2l-dropdown-opener', displayText: this.name })}
 				<d2l-dropdown-content no-auto-focus>Custom</d2l-dropdown-content>
 			</d2l-dropdown>
 		`;

components/tag-list/test/tag-list.test.js

@@ -16,9 +16,9 @@ const basicFixture = html`
 
 const clearableFixture = html`
 	<d2l-tag-list description="Testing Tags" clearable>
-		<d2l-tag-list-item text="Tag"></d2l-tag-list-item>
-		<d2l-tag-list-item text="Another Tag"></d2l-tag-list-item>
-		<d2l-tag-list-item text="Another Very Very Very Very Very Long Tag"></d2l-tag-list-item>
+		<d2l-tag-list-item key="tag" text="Tag"></d2l-tag-list-item>
+		<d2l-tag-list-item key="another-tag" text="Another Tag"></d2l-tag-list-item>
+		<d2l-tag-list-item key="long-tag" text="Another Very Very Very Very Very Long Tag"></d2l-tag-list-item>
 		<d2l-tag-list-item-mixin-consumer name="Tag"></d2l-tag-list-item-mixin-consumer>
 	</d2l-tag-list>
 `;
@@ -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;
 		});
 	});