From 392b28915a8c60608f3d6ff01de8c5e7cf3c6569 Mon Sep 17 00:00:00 2001
From: WithoutPants <53250216+WithoutPants@users.noreply.github.com>
Date: Fri, 5 Nov 2021 11:52:00 +1100
Subject: [PATCH] Fix exclusion pattern inputs blurring on every keypress
 (#1952)

* Replace ExclusionPatterns with StringListInput
---
 .../components/Changelog/versions/v0110.md    |  1 +
 .../Settings/SettingsConfigurationPanel.tsx   | 73 +++----------------
 .../Settings/SettingsScrapingPanel.tsx        | 11 +--
 .../src/components/Shared/StringListInput.tsx |  2 +-
 ui/v2.5/src/components/Shared/styles.scss     |  4 +
 5 files changed, 22 insertions(+), 69 deletions(-)

diff --git a/ui/v2.5/src/components/Changelog/versions/v0110.md b/ui/v2.5/src/components/Changelog/versions/v0110.md
index 44a36205b..7e6bfd2b6 100644
--- a/ui/v2.5/src/components/Changelog/versions/v0110.md
+++ b/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))
diff --git a/ui/v2.5/src/components/Settings/SettingsConfigurationPanel.tsx b/ui/v2.5/src/components/Settings/SettingsConfigurationPanel.tsx
index 405a9b2d1..7f696139b 100644
--- a/ui/v2.5/src/components/Settings/SettingsConfigurationPanel.tsx
+++ b/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({
diff --git a/ui/v2.5/src/components/Settings/SettingsScrapingPanel.tsx b/ui/v2.5/src/components/Settings/SettingsScrapingPanel.tsx
index 3739c5d9b..ecdaa3820 100644
--- a/ui/v2.5/src/components/Settings/SettingsScrapingPanel.tsx
+++ b/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({
diff --git a/ui/v2.5/src/components/Shared/StringListInput.tsx b/ui/v2.5/src/components/Shared/StringListInput.tsx
index 3c06ca608..1c4e7937d 100644
--- a/ui/v2.5/src/components/Shared/StringListInput.tsx
+++ b/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 &&
diff --git a/ui/v2.5/src/components/Shared/styles.scss b/ui/v2.5/src/components/Shared/styles.scss
index 15a9d157a..1e09fbc98 100644
--- a/ui/v2.5/src/components/Shared/styles.scss
+++ b/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;
+}