From 36aa4ea508e35a9220f747a2e52f2db56c045681 Mon Sep 17 00:00:00 2001
From: Gazook89 <John.W.Jones89@gmail.com>
Date: Tue, 17 Sep 2024 23:50:59 -0500
Subject: [PATCH] Add click handler for readTags to open text input

Clicking on a readTag now converts that tag to a text input, and maintains the tag value.  It also closes any other open text inputs amongst the tags (but leaves the "new tag" input open).
---
 client/homebrew/editor/tagInput/tagInput.jsx | 21 ++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/client/homebrew/editor/tagInput/tagInput.jsx b/client/homebrew/editor/tagInput/tagInput.jsx
index bd3f53db4..8063b4ab2 100644
--- a/client/homebrew/editor/tagInput/tagInput.jsx
+++ b/client/homebrew/editor/tagInput/tagInput.jsx
@@ -7,13 +7,26 @@ const TagInput = ({unique = true, values = [], ...props})=>{
 	const [temporaryValue, setTemporaryValue] = useState('');
 	const [valueContext, setValueContext] = useState(values.map((value)=>({ value: value, editing : false })));
 
-	const readTag = (value)=>{
+
+	const editTag = (evt)=>{
+		setValueContext(valueContext.map((context)=>{
+			context.editing = context.value === evt.target.dataset.value ? true : false;
+			return context;
+		}))
+	}
+
+	const renderReadTag = (value)=>{
 		return (
-			<div className={`tag`}>{value}</div>
+			<div key={value} 
+				data-value={value}
+				className={`tag`}
+				onClick={(evt)=>editTag(evt)}>
+					{value}
+			</div>
 		)
 	}
 
-	const writeTag = (value)=>{
+	const renderWriteTag = (value)=>{
 		return (
 			<input type='text' value={value} />
 		)
@@ -25,7 +38,7 @@ const TagInput = ({unique = true, values = [], ...props})=>{
 			<label>{props.label}</label>
 			<div className='list'>
 
-				{Object.values(valueContext).map((context, i)=>{ return context.editing ? writeTag(context.value) : readTag(context.value) })}
+				{Object.values(valueContext).map((context, i)=>{ return context.editing ? renderWriteTag(context.value) : renderReadTag(context.value) })}
 
 				<input type='text'
 					className={`value`}