Fixed: Prevent loss of restrictions when attempting to edit multiple restrictions at once

(cherry picked from commit b16094a9e3153f2ac39800475c1ddb1dafb6ab34)

Closes #8231

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;
 
+    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 {
       <AutoSuggestInput
         {...otherProps}
         forwardedRef={this._setAutosuggestRef}
-        className={styles.internalInput}
+        className={className}
         inputContainerClassName={classNames(
           inputContainerClassName,
           isFocused && styles.isFocused
@@ -272,7 +278,8 @@ TagInput.propTypes = {
   hasWarning: PropTypes.bool,
   tagComponent: PropTypes.elementType.isRequired,
   onTagAdd: PropTypes.func.isRequired,
-  onTagDelete: PropTypes.func.isRequired
+  onTagDelete: PropTypes.func.isRequired,
+  onTagReplace: PropTypes.func
 };
 
 TagInput.defaultProps = {

frontend/src/Components/Form/TagInputConnector.js

@@ -138,6 +138,7 @@ class TagInputConnector extends Component {
       <TagInput
         onTagAdd={this.onTagAdd}
         onTagDelete={this.onTagDelete}
+        onTagReplace={this.onTagReplace}
         {...this.props}
       />
     );

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}
       />
     );

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%;
+}

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;

frontend/src/Settings/Indexers/Restrictions/EditRestrictionModalContent.js

@@ -48,6 +48,7 @@ function EditRestrictionModalContent(props) {
 
             <FormInputGroup
               {...required}
+              inputClassName={styles.tagInternalInput}
               type={inputTypes.TEXT_TAG}
               name="required"
               helpText={translate('RequiredRestrictionHelpText')}
@@ -63,6 +64,7 @@ function EditRestrictionModalContent(props) {
 
             <FormInputGroup
               {...ignored}
+              inputClassName={styles.tagInternalInput}
               type={inputTypes.TEXT_TAG}
               name="ignored"
               helpText={translate('IgnoredHelpText')}