fix: validate plainText option asynchronously (#4261)

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

@@ -136,6 +136,7 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
 		this.keyboardTooltipShown = false;
 		this._id = getUniqueId();
 		this._plainText = '';
+		this._validatingPlainTextTimeout = null;
 	}
 
 	firstUpdated(changedProperties) {
@@ -216,7 +217,7 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
 	}
 
 	_renderTag(tagContent, options = {}) {
-		if (options.plainText?.constructor !== String) throw new TypeError('options.plainText must be a string');
+		this._validatePlainText();
 		this._plainText = options.plainText || '';
 
 		const buttonText = this.localize('components.tag-list.clear', { value: this._plainText });
@@ -276,4 +277,17 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
 		`;
 	}
 
+	_validatePlainText() {
+		clearTimeout(this._validatingPlainTextTimeout);
+		// don't error immediately in case it doesn't get set immediately
+		this._validatingPlainTextTimeout = setTimeout(() => {
+			this._validatingPlainTextTimeout = null;
+			if (!this.isConnected) return;
+			const hasPlainText = (this._plainText?.constructor === String) && this._plainText?.length > 0;
+			if (!hasPlainText) {
+				throw new Error(`TagListItemMixin: "${this.tagName.toLowerCase()}" called "_render()" with empty "plainText" option`);
+			}
+		}, 3000);
+	}
+
 };

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

@@ -133,16 +133,5 @@ describe('d2l-tag-list-item-mixin-consumer', () => {
 			const child = elem.children[3];
 			expect(child._plainText).to.be.equal('Tag');
 		});
-
-		it('should error if not provided', async() => {
-			let error;
-			try {
-				await fixture(html`<d2l-tag-list-item-mixin-consumer></d2l-tag-list-item-mixin-consumer>`);
-			} catch (e) {
-				error = e;
-			}
-			expect(error?.name).to.equal('TypeError');
-		});
-
 	});
 });