From 70a3cb9ef9a1f1ae745107bb47cb259c245f74c0 Mon Sep 17 00:00:00 2001
From: Gazook89 <John.W.Jones89@gmail.com>
Date: Wed, 18 Sep 2024 22:46:00 -0500
Subject: [PATCH] Add method for adding new tags

Component now accepts new tags entered in the always-present input field.  Entering a value and hitting Enter submits the tag, and it appears as a new tag.

Updated the tag list keys to be unique (via `index`).

To-Do: empty 'new tag' input after submitting.
---
 client/homebrew/editor/tagInput/tagInput.jsx | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/client/homebrew/editor/tagInput/tagInput.jsx b/client/homebrew/editor/tagInput/tagInput.jsx
index 22760896a..f42e2f62f 100644
--- a/client/homebrew/editor/tagInput/tagInput.jsx
+++ b/client/homebrew/editor/tagInput/tagInput.jsx
@@ -1,5 +1,6 @@
 const React = require('react');
 const { useState, useEffect } = React;
+const _     = require('lodash');
 
 const TagInput = ({ unique = true, values = [], ...props }) => {
 	const [temporaryValue, setTemporaryValue] = useState('');
@@ -25,6 +26,11 @@ const TagInput = ({ unique = true, values = [], ...props }) => {
 
 	const submitTag = (newValue, originalValue) => {
 		setValueContext((prevContext) => {
+			// add new tag
+			if(originalValue === null){
+				return [...prevContext, { value: newValue, editing: false }]
+			}
+			// update existing tag
 			return prevContext.map((context) => {
 				if (context.value === originalValue) {
 					return { ...context, value: newValue, editing: false };
@@ -45,9 +51,9 @@ const TagInput = ({ unique = true, values = [], ...props }) => {
 		});
 	};
 
-	const renderReadTag = (context) => {
+	const renderReadTag = (context, index) => {
 		return (
-			<div key={context.value}
+			<div key={index}
 				data-value={context.value}
 				className='tag'
 				onClick={() => editTag(context.value)}>
@@ -56,10 +62,10 @@ const TagInput = ({ unique = true, values = [], ...props }) => {
 		);
 	};
 
-	const renderWriteTag = (context) => {
+	const renderWriteTag = (context, index) => {
 		return (
 			<input type='text'
-				key={context.value}
+				key={index}
 				defaultValue={context.value} 
 				onKeyDown={(evt) => handleInputKeyDown(evt, context.value)} 
 				autoFocus 
@@ -71,13 +77,14 @@ const TagInput = ({ unique = true, values = [], ...props }) => {
 		<div className='field'>
 			<label>{props.label}</label>
 			<div className='list'>
-				{valueContext.map((context) => { return context.editing ? renderWriteTag(context) : renderReadTag(context); })}
+				{valueContext.map((context, index) => { return context.editing ? renderWriteTag(context, index) : renderReadTag(context, index); })}
 
 				<input type='text'
 					className='value'
 					placeholder={props.placeholder}
 					value={temporaryValue}
-					onChange={(e) => setTemporaryValue(e.target.value)} />
+					onChange={(e) => setTemporaryValue(e.target.value)}
+					onKeyDown={(evt) => handleInputKeyDown(evt, null)}  />
 			</div>
 		</div>
 	);