Tags Property Editor: Remove tags with keyboard backspace/delete

src/Umbraco.Web.UI.Client/src/packages/tags/components/tags-input/tags-input.element.ts

@@ -78,13 +78,23 @@
 		this._matches = data.items;
 	}
 
-	#onKeydown(e: KeyboardEvent) {
+	#onKeydown(e: KeyboardEvent, idx: number) {
 		//Prevent tab away if there is a input.
 		if (e.key === 'Tab' && (this._tagInput.value as string).trim().length && !this._matches.length) {
 			e.preventDefault();
 			this.#createTag();
 			return;
 		}
+
+		//To be able to get out of the input
+		if (e.key === 'Tab' && !(this._tagInput.value as string).trim().length) return;
+
+		if (e.key === 'Backspace') {
+			e.preventDefault();
+			console.log('DELETE TAG:', this.#items[idx]);
+			this.#delete(this.#items[idx]);
+		}
+
 		if (e.key === 'Enter') {
 			this.#createTag();
 			return;
@@ -208,9 +218,9 @@
 	}
 
 	#enteredTags() {
-		return html` ${this.items.map((tag) => {
+		return html` ${this.items.map((tag, index) => {
 			return html`
-				<uui-tag class="tag">
+				<uui-tag class="tag" tabindex="0" @keydown="${(e: KeyboardEvent) => this.#onKeydown(e, index)}">
 					<span>${tag}</span>
 					${this.#renderRemoveButton(tag)}
 				</uui-tag>