Fix exclusion pattern inputs blurring on every keypress (#1952)

* Replace ExclusionPatterns with StringListInput

ui/v2.5/src/components/Changelog/versions/v0110.md

@@ -21,6 +21,7 @@
 * Optimised scanning process. ([#1816](https://github.com/stashapp/stash/pull/1816))
 
 ### 🐛 Bug fixes
+* Fix exclusion pattern fields losing focus on keypress. ([#1952](https://github.com/stashapp/stash/pull/1952))
 * Include stash ids in import/export. ([#1916](https://github.com/stashapp/stash/pull/1916))
 * Fix tiny menu items in scrape menu when a stash-box instance has no name. ([#1889](https://github.com/stashapp/stash/pull/1889))
 * Fix creating missing entities removing the incorrect entry from the missing list in the scrape dialog. ([#1890](https://github.com/stashapp/stash/pull/1890))

ui/v2.5/src/components/Settings/SettingsConfigurationPanel.tsx

@@ -16,61 +16,6 @@ import {
 import StashConfiguration from "./StashConfiguration";
 import { StringListInput } from "../Shared/StringListInput";
 
-interface IExclusionPatternsProps {
-  excludes: string[];
-  setExcludes: (value: string[]) => void;
-  demo: string;
-}
-
-export const ExclusionPatterns: React.FC<IExclusionPatternsProps> = (props) => {
-  function excludeRegexChanged(idx: number, value: string) {
-    const newExcludes = props.excludes.map((regex, i) => {
-      const ret = idx !== i ? regex : value;
-      return ret;
-    });
-    props.setExcludes(newExcludes);
-  }
-
-  function excludeRemoveRegex(idx: number) {
-    const newExcludes = props.excludes.filter((_regex, i) => i !== idx);
-
-    props.setExcludes(newExcludes);
-  }
-
-  function excludeAddRegex() {
-    const newExcludes = props.excludes.concat(props.demo);
-
-    props.setExcludes(newExcludes);
-  }
-
-  return (
-    <>
-      <Form.Group>
-        {props.excludes &&
-          props.excludes.map((regexp, i) => (
-            <InputGroup key={regexp}>
-              <Form.Control
-                className="col col-sm-6 text-input"
-                value={regexp}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                  excludeRegexChanged(i, e.currentTarget.value)
-                }
-              />
-              <InputGroup.Append>
-                <Button variant="danger" onClick={() => excludeRemoveRegex(i)}>
-                  <Icon icon="minus" />
-                </Button>
-              </InputGroup.Append>
-            </InputGroup>
-          ))}
-      </Form.Group>
-      <Button className="minimal" onClick={() => excludeAddRegex()}>
-        <Icon icon="plus" />
-      </Button>
-    </>
-  );
-};
-
 export const SettingsConfigurationPanel: React.FC = () => {
   const intl = useIntl();
   const Toast = useToast();
@@ -523,10 +468,11 @@ export const SettingsConfigurationPanel: React.FC = () => {
               id: "config.general.excluded_video_patterns_head",
             })}
           </h6>
-          <ExclusionPatterns
-            excludes={excludes}
-            setExcludes={setExcludes}
-            demo="sample\.mp4$"
+          <StringListInput
+            className="w-50"
+            value={excludes}
+            setValue={setExcludes}
+            defaultNewValue="sample\.mp4$"
           />
           <Form.Text className="text-muted">
             {intl.formatMessage({
@@ -548,10 +494,11 @@ export const SettingsConfigurationPanel: React.FC = () => {
               id: "config.general.excluded_image_gallery_patterns_head",
             })}
           </h6>
-          <ExclusionPatterns
-            excludes={imageExcludes}
-            setExcludes={setImageExcludes}
-            demo="sample\.jpg$"
+          <StringListInput
+            className="w-50"
+            value={imageExcludes}
+            setValue={setImageExcludes}
+            defaultNewValue="sample\.jpg$"
           />
           <Form.Text className="text-muted">
             {intl.formatMessage({

ui/v2.5/src/components/Settings/SettingsScrapingPanel.tsx

@@ -14,7 +14,7 @@ import { useToast } from "src/hooks";
 import { TextUtils } from "src/utils";
 import { CollapseButton, Icon, LoadingIndicator } from "src/components/Shared";
 import { ScrapeType } from "src/core/generated-graphql";
-import { ExclusionPatterns } from "./SettingsConfigurationPanel";
+import { StringListInput } from "../Shared/StringListInput";
 
 interface IURLList {
   urls: string[];
@@ -408,10 +408,11 @@ export const SettingsScrapingPanel: React.FC = () => {
             id: "config.scraping.excluded_tag_patterns_head",
           })}
         </h6>
-        <ExclusionPatterns
-          excludes={excludeTagPatterns}
-          setExcludes={setExcludeTagPatterns}
-          demo="4K"
+        <StringListInput
+          className="w-50"
+          value={excludeTagPatterns}
+          setValue={setExcludeTagPatterns}
+          defaultNewValue="4K"
         />
         <Form.Text className="text-muted">
           {intl.formatMessage({

ui/v2.5/src/components/Shared/StringListInput.tsx

@@ -33,7 +33,7 @@ export const StringListInput: React.FC<IStringListInputProps> = (props) => {
 
   return (
     <>
-      <div className={props.errors && "is-invalid"}>
+      <div className={`string-list-input ${props.errors ? "is-invalid" : ""}`}>
         {props.value && props.value.length > 0 && (
           <Form.Group>
             {props.value &&

ui/v2.5/src/components/Shared/styles.scss

@@ -258,3 +258,7 @@ button.collapse-button.btn-primary:not(:disabled):not(.disabled):active {
 .scrape-url-button:disabled {
   opacity: 0.5;
 }
+
+.string-list-input .input-group {
+  margin-bottom: 0.25rem;
+}