f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2025-12-26 11:42:39 +00:00
Code Wiki Activity

Fix multiple duplicate tags updating at once

Browse Source 
Fixes an issue where tags with duplicate values would all update to the same value after editing just one.

Also an adjustment to the parameters that are passed to handleInputKeyDown-- they are now one object.  This helps handle an "options" object where more optional features can be turned on and off.
This commit is contained in:
Gazook89
2024-09-19 15:48:47 -05:00
parent 8a67e1eccd
commit b585e85f0f
1 changed files with 17 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
client/homebrew/editor/tagInput/tagInput.jsx
View File

@@ -17,12 +17,14 @@ const TagInput = ({ unique = true, values = [], ...props }) => {
})
};
const handleInputKeyDown = (evt, value, clear = false) => {
const handleInputKeyDown = ({ evt, value, index, options = {} }) => {
if (_.includes(['Enter', ','], evt.key)) {
evt.preventDefault();
submitTag(evt.target.value, value);
if(clear){ setTemporaryValue(''); }
};
submitTag(evt.target.value, value, index);
if (options.clear) {
setTemporaryValue('');
}
}
};
const submitTag = (newValue, originalValue, index) => {
@@ -36,8 +38,8 @@ const TagInput = ({ unique = true, values = [], ...props }) => {
return [...prevContext, { value: newValue, editing: false }]
}
// update existing tag
return prevContext.map((context) => {
if (context.value === originalValue) {
return prevContext.map((context, i) => {
if (i === index) {
return { ...context, value: newValue, editing: false };
}
return context;
@@ -45,10 +47,10 @@ const TagInput = ({ unique = true, values = [], ...props }) => {
});
};
const editTag = (valueToEdit) => {
const editTag = (index) => {
setValueContext((prevContext) => {
return prevContext.map((context) => {
if (context.value === valueToEdit) {
return prevContext.map((context, i) => {
if (i === index) {
return { ...context, editing: true };
}
return { ...context, editing: false };
@@ -61,7 +63,7 @@ const TagInput = ({ unique = true, values = [], ...props }) => {
<li key={index}
data-value={context.value}
className='tag'
onClick={() => editTag(context.value)}>
onClick={() => editTag(index)}>
{context.value}
<button onClick={(evt)=>{evt.stopPropagation(); submitTag(null, context.value, index)}}><i className='fa fa-times fa-fw'/></button>
</li>
@@ -73,7 +75,7 @@ const TagInput = ({ unique = true, values = [], ...props }) => {
<input type='text'
key={index}
defaultValue={context.value}
onKeyDown={(evt) => handleInputKeyDown(evt, context.value)}
onKeyDown={(evt) => handleInputKeyDown({evt, value: context.value, index: index})}
autoFocus
/>
);
@@ -87,12 +89,14 @@ const TagInput = ({ unique = true, values = [], ...props }) => {
{valueContext.map((context, index) => { return context.editing ? renderWriteTag(context, index) : renderReadTag(context, index); })}
</ul>
<input type='text'
<input
type='text'
className='value'
placeholder={props.placeholder}
value={temporaryValue}
onChange={(e) => setTemporaryValue(e.target.value)}
onKeyDown={(evt) =>handleInputKeyDown(evt, null, true)} />
onKeyDown={(evt) => handleInputKeyDown({ evt, value: null, options: { clear: true } })}
/>
</div>
</div>
);