diff --git a/frontend/src/Components/Form/TagInput.js b/frontend/src/Components/Form/TagInput.js
index 1c34ec1c3..840d627f8 100644
--- a/frontend/src/Components/Form/TagInput.js
+++ b/frontend/src/Components/Form/TagInput.js
@@ -76,9 +76,15 @@ class TagInput extends Component {
// Listeners
onTagEdit = ({ value, ...otherProps }) => {
- this.setState({ value });
+ const currentValue = this.state.value;
- this.props.onTagDelete(otherProps);
+ if (currentValue && this.props.onTagReplace) {
+ this.props.onTagReplace(otherProps, { name: currentValue });
+ } else {
+ this.props.onTagDelete(otherProps);
+ }
+
+ this.setState({ value });
};
onInputContainerPress = () => {
@@ -234,7 +240,7 @@ class TagInput extends Component {
);
diff --git a/frontend/src/Components/Form/TextTagInputConnector.js b/frontend/src/Components/Form/TextTagInputConnector.js
index bd2d0c9d0..aef065cfa 100644
--- a/frontend/src/Components/Form/TextTagInputConnector.js
+++ b/frontend/src/Components/Form/TextTagInputConnector.js
@@ -71,6 +71,20 @@ class TextTagInputConnector extends Component {
});
};
+ onTagReplace = (tagToReplace, newTag) => {
+ const {
+ name,
+ valueArray,
+ onChange
+ } = this.props;
+
+ const newValue = [...valueArray];
+ newValue.splice(tagToReplace.index, 1);
+ newValue.push(newTag.name.trim());
+
+ onChange({ name, value: newValue });
+ };
+
//
// Render
@@ -80,6 +94,7 @@ class TextTagInputConnector extends Component {
tagList={[]}
onTagAdd={this.onTagAdd}
onTagDelete={this.onTagDelete}
+ onTagReplace={this.onTagReplace}
{...this.props}
/>
);
diff --git a/frontend/src/Settings/Profiles/Release/EditReleaseProfileModalContent.css b/frontend/src/Settings/Profiles/Release/EditReleaseProfileModalContent.css
index a2b6014df..050567669 100644
--- a/frontend/src/Settings/Profiles/Release/EditReleaseProfileModalContent.css
+++ b/frontend/src/Settings/Profiles/Release/EditReleaseProfileModalContent.css
@@ -3,3 +3,9 @@
margin-right: auto;
}
+
+.tagInternalInput {
+ composes: internalInput from '~Components/Form/TagInput.css';
+
+ flex: 0 0 100%;
+}
diff --git a/frontend/src/Settings/Profiles/Release/EditReleaseProfileModalContent.css.d.ts b/frontend/src/Settings/Profiles/Release/EditReleaseProfileModalContent.css.d.ts
index c5f0ef8a7..930ca0cb3 100644
--- a/frontend/src/Settings/Profiles/Release/EditReleaseProfileModalContent.css.d.ts
+++ b/frontend/src/Settings/Profiles/Release/EditReleaseProfileModalContent.css.d.ts
@@ -2,6 +2,7 @@
// Please do not change this file!
interface CssExports {
'deleteButton': string;
+ 'tagInternalInput': string;
}
export const cssExports: CssExports;
export default cssExports;
diff --git a/frontend/src/Settings/Profiles/Release/EditReleaseProfileModalContent.js b/frontend/src/Settings/Profiles/Release/EditReleaseProfileModalContent.js
index ed2c04e87..e544077af 100644
--- a/frontend/src/Settings/Profiles/Release/EditReleaseProfileModalContent.js
+++ b/frontend/src/Settings/Profiles/Release/EditReleaseProfileModalContent.js
@@ -76,6 +76,7 @@ function EditReleaseProfileModalContent(props) {