From c65210b3ed6899e6ed131187a91b042d32fb2d35 Mon Sep 17 00:00:00 2001
From: Gazook89 <John.W.Jones89@gmail.com>
Date: Wed, 18 Sep 2024 23:13:46 -0500
Subject: [PATCH] Add 'remove' button and method

New button that triggers `submitTag()` method directly (rather than throw onKeyDown event) and passes `null` as the newValue.  New `if` condition checks for null on newValue and if true, removes the tag that matches the originalValue.

This *does* currently delete all duplicate tags if they match the one you are deleting.  Not sure when you'd ever want duplicate tags, but regardless i'll likely switch this to work via Index, not value.
---
 client/homebrew/editor/tagInput/tagInput.jsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/client/homebrew/editor/tagInput/tagInput.jsx b/client/homebrew/editor/tagInput/tagInput.jsx
index f42e2f62f..03678961d 100644
--- a/client/homebrew/editor/tagInput/tagInput.jsx
+++ b/client/homebrew/editor/tagInput/tagInput.jsx
@@ -26,6 +26,11 @@ const TagInput = ({ unique = true, values = [], ...props }) => {
 
 	const submitTag = (newValue, originalValue) => {
 		setValueContext((prevContext) => {
+			// remove existing tag
+			if(newValue === null){
+				console.log('remove');
+				return [...prevContext].filter((context)=>context.value !== originalValue);
+			}
 			// add new tag
 			if(originalValue === null){
 				return [...prevContext, { value: newValue, editing: false }]
@@ -58,6 +63,7 @@ const TagInput = ({ unique = true, values = [], ...props }) => {
 				className='tag'
 				onClick={() => editTag(context.value)}>
 				{context.value}
+				<button onClick={(evt)=>{evt.stopPropagation(); submitTag(null, context.value)}}><i className='fa fa-times fa-fw'/></button>
 			</div>
 		);
 	};