diff --git a/frontend/src/Components/Form/TagInput.js b/frontend/src/Components/Form/TagInput.js index 44c6f48b0..8c66772f9 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 = () => { @@ -232,7 +238,7 @@ class TagInput extends Component { ); diff --git a/frontend/src/Components/Form/TextTagInputConnector.js b/frontend/src/Components/Form/TextTagInputConnector.js index cba307e26..9f6d12689 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/Movie/Edit/EditMovieModalContent.css b/frontend/src/Movie/Edit/EditMovieModalContent.css index a2b6014df..050567669 100644 --- a/frontend/src/Movie/Edit/EditMovieModalContent.css +++ b/frontend/src/Movie/Edit/EditMovieModalContent.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/Movie/Edit/EditMovieModalContent.css.d.ts b/frontend/src/Movie/Edit/EditMovieModalContent.css.d.ts index c5f0ef8a7..930ca0cb3 100644 --- a/frontend/src/Movie/Edit/EditMovieModalContent.css.d.ts +++ b/frontend/src/Movie/Edit/EditMovieModalContent.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/Indexers/Restrictions/EditRestrictionModalContent.js b/frontend/src/Settings/Indexers/Restrictions/EditRestrictionModalContent.js index 503df8be9..9070076b1 100644 --- a/frontend/src/Settings/Indexers/Restrictions/EditRestrictionModalContent.js +++ b/frontend/src/Settings/Indexers/Restrictions/EditRestrictionModalContent.js @@ -48,6 +48,7 @@ function EditRestrictionModalContent(props) {