From f827379e82a5f9be6c37ed21c9e233ab5af967e1 Mon Sep 17 00:00:00 2001
From: DingDongSoLong4 <99329275+DingDongSoLong4@users.noreply.github.com>
Date: Sat, 23 Sep 2023 13:41:36 +0200
Subject: [PATCH 1/5] Fix Tagger PerformerSelect active highlight

---
 .../components/Performers/PerformerSelect.tsx |  8 ++++++++
 ui/v2.5/src/components/Performers/styles.scss |  2 +-
 .../src/components/Shared/FilterSelect.tsx    |  2 +-
 .../Shared/ScrapeDialog/ScrapedObjectsRow.tsx |  2 +-
 .../Tagger/scenes/PerformerResult.tsx         |  5 +----
 ui/v2.5/src/components/Tagger/styles.scss     | 20 +++++++++----------
 6 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/ui/v2.5/src/components/Performers/PerformerSelect.tsx b/ui/v2.5/src/components/Performers/PerformerSelect.tsx
index c721d652deb..de1cf6771a9 100644
--- a/ui/v2.5/src/components/Performers/PerformerSelect.tsx
+++ b/ui/v2.5/src/components/Performers/PerformerSelect.tsx
@@ -5,6 +5,7 @@ import {
   MultiValueGenericProps,
   SingleValueProps,
 } from "react-select";
+import cx from "classnames";
 
 import * as GQL from "src/core/generated-graphql";
 import {
@@ -170,6 +171,13 @@ export const PerformerSelect: React.FC<
   return (
     <FilterSelectComponent<Performer, boolean>
       {...props}
+      className={cx(
+        "performer-select",
+        {
+          "performer-select-active": props.active,
+        },
+        props.className
+      )}
       loadOptions={loadPerformers}
       getNamedObject={getNamedObject}
       isValidNewOption={isValidNewOption}
diff --git a/ui/v2.5/src/components/Performers/styles.scss b/ui/v2.5/src/components/Performers/styles.scss
index 4451728043b..f2d23372551 100644
--- a/ui/v2.5/src/components/Performers/styles.scss
+++ b/ui/v2.5/src/components/Performers/styles.scss
@@ -224,6 +224,6 @@
   }
 }
 
-.react-select .alias {
+.performer-select .alias {
   font-weight: bold;
 }
diff --git a/ui/v2.5/src/components/Shared/FilterSelect.tsx b/ui/v2.5/src/components/Shared/FilterSelect.tsx
index 3489f1851d4..931dd15e6a3 100644
--- a/ui/v2.5/src/components/Shared/FilterSelect.tsx
+++ b/ui/v2.5/src/components/Shared/FilterSelect.tsx
@@ -89,7 +89,6 @@ const SelectComponent = <T, IsMulti extends boolean>(
     styles,
     defaultOptions: true,
     value: selectedOptions,
-    className: "react-select",
     classNamePrefix: "react-select",
     noOptionsMessage: () => noOptionsMessage,
     placeholder: isDisabled ? "" : placeholder,
@@ -119,6 +118,7 @@ export interface IFilterValueProps<T> {
 export interface IFilterProps {
   noSelectionString?: string;
   className?: string;
+  active?: boolean;
   isMulti?: boolean;
   isClearable?: boolean;
   isDisabled?: boolean;
diff --git a/ui/v2.5/src/components/Shared/ScrapeDialog/ScrapedObjectsRow.tsx b/ui/v2.5/src/components/Shared/ScrapeDialog/ScrapedObjectsRow.tsx
index 606821c789d..05c1d75ad50 100644
--- a/ui/v2.5/src/components/Shared/ScrapeDialog/ScrapedObjectsRow.tsx
+++ b/ui/v2.5/src/components/Shared/ScrapeDialog/ScrapedObjectsRow.tsx
@@ -147,7 +147,7 @@ export const ScrapedPerformersRow: React.FC<
     return (
       <PerformerSelect
         isMulti
-        className="form-control react-select"
+        className="form-control"
         isDisabled={!isNew}
         onSelect={(items) => {
           if (onChangeFn) {
diff --git a/ui/v2.5/src/components/Tagger/scenes/PerformerResult.tsx b/ui/v2.5/src/components/Tagger/scenes/PerformerResult.tsx
index 19f072c4418..c0e08eefddc 100755
--- a/ui/v2.5/src/components/Tagger/scenes/PerformerResult.tsx
+++ b/ui/v2.5/src/components/Tagger/scenes/PerformerResult.tsx
@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { Button, ButtonGroup } from "react-bootstrap";
 import { FormattedMessage } from "react-intl";
-import cx from "classnames";
 
 import * as GQL from "src/core/generated-graphql";
 import { Icon } from "src/components/Shared/Icon";
@@ -134,9 +133,7 @@ const PerformerResult: React.FC<IPerformerResultProps> = ({
         <PerformerSelect
           values={selectedPerformer ? [selectedPerformer] : []}
           onSelect={handlePerformerSelect}
-          className={cx("performer-select", {
-            "performer-select-active": selectedSource === "existing",
-          })}
+          active={selectedSource === "existing"}
           isClearable={false}
         />
         {maybeRenderLinkButton()}
diff --git a/ui/v2.5/src/components/Tagger/styles.scss b/ui/v2.5/src/components/Tagger/styles.scss
index b40ce167cc1..c54d939bfa7 100644
--- a/ui/v2.5/src/components/Tagger/styles.scss
+++ b/ui/v2.5/src/components/Tagger/styles.scss
@@ -66,6 +66,16 @@
     background-color: hsl(204, 20%, 30%);
     cursor: pointer;
   }
+
+  .performer-select,
+  .studio-select {
+    width: 14rem;
+
+    // stylelint-disable-next-line selector-class-pattern
+    &-active .react-select__control {
+      background-color: #137cbd;
+    }
+  }
 }
 
 .selected-result {
@@ -98,16 +108,6 @@
   width: 2rem;
 }
 
-.performer-select,
-.studio-select {
-  width: 14rem;
-
-  // stylelint-disable-next-line selector-class-pattern
-  &-active .react-select__control {
-    background-color: #137cbd;
-  }
-}
-
 .entity-name {
   flex: 1;
   margin-right: auto;

From 280fbb21264e7f4e361c049f31c16830085717b4 Mon Sep 17 00:00:00 2001
From: DingDongSoLong4 <99329275+DingDongSoLong4@users.noreply.github.com>
Date: Sat, 23 Sep 2023 13:44:19 +0200
Subject: [PATCH 2/5] Clear select on skip

---
 .../components/Tagger/scenes/PerformerResult.tsx  | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/ui/v2.5/src/components/Tagger/scenes/PerformerResult.tsx b/ui/v2.5/src/components/Tagger/scenes/PerformerResult.tsx
index c0e08eefddc..35d609e7b59 100755
--- a/ui/v2.5/src/components/Tagger/scenes/PerformerResult.tsx
+++ b/ui/v2.5/src/components/Tagger/scenes/PerformerResult.tsx
@@ -42,9 +42,7 @@ const PerformerResult: React.FC<IPerformerResultProps> = ({
       stashID.stash_id === performer.remote_site_id
   );
 
-  const [selectedPerformer, setSelectedPerformer] = useState<
-    Performer | undefined
-  >();
+  const [selectedPerformer, setSelectedPerformer] = useState<Performer>();
 
   useEffect(() => {
     if (
@@ -55,7 +53,7 @@ const PerformerResult: React.FC<IPerformerResultProps> = ({
     }
   }, [performerData?.findPerformer, selectedID]);
 
-  const handlePerformerSelect = (performers: Performer[]) => {
+  const handleSelect = (performers: Performer[]) => {
     if (performers.length) {
       setSelectedPerformer(performers[0]);
       setSelectedID(performers[0].id);
@@ -65,7 +63,8 @@ const PerformerResult: React.FC<IPerformerResultProps> = ({
     }
   };
 
-  const handlePerformerSkip = () => {
+  const handleSkip = () => {
+    setSelectedPerformer(undefined);
     setSelectedID(undefined);
   };
 
@@ -82,7 +81,7 @@ const PerformerResult: React.FC<IPerformerResultProps> = ({
           <OptionalField
             exclude={selectedID === undefined}
             setExclude={(v) =>
-              v ? handlePerformerSkip() : setSelectedID(matchedPerformer.id)
+              v ? handleSkip() : setSelectedID(matchedPerformer.id)
             }
           >
             <div>
@@ -126,13 +125,13 @@ const PerformerResult: React.FC<IPerformerResultProps> = ({
         </Button>
         <Button
           variant={selectedSource === "skip" ? "primary" : "secondary"}
-          onClick={() => handlePerformerSkip()}
+          onClick={() => handleSkip()}
         >
           <FormattedMessage id="actions.skip" />
         </Button>
         <PerformerSelect
           values={selectedPerformer ? [selectedPerformer] : []}
-          onSelect={handlePerformerSelect}
+          onSelect={handleSelect}
           active={selectedSource === "existing"}
           isClearable={false}
         />

From 42797642017d60172d7934cf116108f9fb33e3a8 Mon Sep 17 00:00:00 2001
From: DingDongSoLong4 <99329275+DingDongSoLong4@users.noreply.github.com>
Date: Sat, 23 Sep 2023 23:29:29 +0200
Subject: [PATCH 3/5] Add back react-select className

---
 ui/v2.5/src/components/Shared/FilterSelect.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/ui/v2.5/src/components/Shared/FilterSelect.tsx b/ui/v2.5/src/components/Shared/FilterSelect.tsx
index 931dd15e6a3..389de51a85e 100644
--- a/ui/v2.5/src/components/Shared/FilterSelect.tsx
+++ b/ui/v2.5/src/components/Shared/FilterSelect.tsx
@@ -10,6 +10,7 @@ import AsyncSelect from "react-select/async";
 import AsyncCreatableSelect, {
   AsyncCreatableProps,
 } from "react-select/async-creatable";
+import cx from "classnames";
 
 import { useToast } from "src/hooks/Toast";
 import { useDebounce } from "src/hooks/debounce";
@@ -89,6 +90,7 @@ const SelectComponent = <T, IsMulti extends boolean>(
     styles,
     defaultOptions: true,
     value: selectedOptions,
+    className: cx("react-select", props.className),
     classNamePrefix: "react-select",
     noOptionsMessage: () => noOptionsMessage,
     placeholder: isDisabled ? "" : placeholder,

From c0b98ceee05d88f44b32dc0d7ed91ed728fd5886 Mon Sep 17 00:00:00 2001
From: WithoutPants <53250216+WithoutPants@users.noreply.github.com>
Date: Mon, 25 Sep 2023 10:43:48 +1000
Subject: [PATCH 4/5] Use null for single empty value

---
 ui/v2.5/src/components/Shared/FilterSelect.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/v2.5/src/components/Shared/FilterSelect.tsx b/ui/v2.5/src/components/Shared/FilterSelect.tsx
index 389de51a85e..730aa7ec22a 100644
--- a/ui/v2.5/src/components/Shared/FilterSelect.tsx
+++ b/ui/v2.5/src/components/Shared/FilterSelect.tsx
@@ -89,7 +89,7 @@ const SelectComponent = <T, IsMulti extends boolean>(
     ...props,
     styles,
     defaultOptions: true,
-    value: selectedOptions,
+    value: selectedOptions ?? null,
     className: cx("react-select", props.className),
     classNamePrefix: "react-select",
     noOptionsMessage: () => noOptionsMessage,

From 4a1eb474a8511fe9daf668027061fd9945a74f7b Mon Sep 17 00:00:00 2001
From: WithoutPants <53250216+WithoutPants@users.noreply.github.com>
Date: Mon, 25 Sep 2023 10:44:20 +1000
Subject: [PATCH 5/5] Add function for duplicated code

---
 .../components/Tagger/scenes/PerformerResult.tsx   | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/ui/v2.5/src/components/Tagger/scenes/PerformerResult.tsx b/ui/v2.5/src/components/Tagger/scenes/PerformerResult.tsx
index 35d609e7b59..6afbc442730 100755
--- a/ui/v2.5/src/components/Tagger/scenes/PerformerResult.tsx
+++ b/ui/v2.5/src/components/Tagger/scenes/PerformerResult.tsx
@@ -44,6 +44,11 @@ const PerformerResult: React.FC<IPerformerResultProps> = ({
 
   const [selectedPerformer, setSelectedPerformer] = useState<Performer>();
 
+  function selectPerformer(selected: Performer | undefined) {
+    setSelectedPerformer(selected);
+    setSelectedID(selected?.id);
+  }
+
   useEffect(() => {
     if (
       performerData?.findPerformer &&
@@ -55,17 +60,14 @@ const PerformerResult: React.FC<IPerformerResultProps> = ({
 
   const handleSelect = (performers: Performer[]) => {
     if (performers.length) {
-      setSelectedPerformer(performers[0]);
-      setSelectedID(performers[0].id);
+      selectPerformer(performers[0]);
     } else {
-      setSelectedPerformer(undefined);
-      setSelectedID(undefined);
+      selectPerformer(undefined);
     }
   };
 
   const handleSkip = () => {
-    setSelectedPerformer(undefined);
-    setSelectedID(undefined);
+    selectPerformer(undefined);
   };
 
   if (stashLoading) return <div>Loading performer</div>;