PerformerSelect Tagger bugfixes (stashapp#4148)

* Fix Tagger PerformerSelect active highlight * Clear select on skip * Add back react-select className
halkeye · Sep 1, 2024 · d718932 · d718932
1 parent a79beee
commit d718932
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 31 deletions.
diff --git 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
@@ -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
@@ -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";
@@ -88,8 +89,8 @@ const SelectComponent = <T, IsMulti extends boolean>(
     ...props,
     styles,
     defaultOptions: true,
-    value: selectedOptions,
-    className: "react-select",
+    value: selectedOptions ?? null,
+    className: cx("react-select", props.className),
     classNamePrefix: "react-select",
     noOptionsMessage: () => noOptionsMessage,
     placeholder: isDisabled ? "" : placeholder,
@@ -119,6 +120,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
@@ -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
@@ -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";
@@ -43,9 +42,12 @@ const PerformerResult: React.FC<IPerformerResultProps> = ({
       stashID.stash_id === performer.remote_site_id
   );
 
-  const [selectedPerformer, setSelectedPerformer] = useState<
-    Performer | undefined
-  >();
+  const [selectedPerformer, setSelectedPerformer] = useState<Performer>();
+
+  function selectPerformer(selected: Performer | undefined) {
+    setSelectedPerformer(selected);
+    setSelectedID(selected?.id);
+  }
 
   useEffect(() => {
     if (
@@ -56,18 +58,16 @@ 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);
+      selectPerformer(performers[0]);
     } else {
-      setSelectedPerformer(undefined);
-      setSelectedID(undefined);
+      selectPerformer(undefined);
     }
   };
 
-  const handlePerformerSkip = () => {
-    setSelectedID(undefined);
+  const handleSkip = () => {
+    selectPerformer(undefined);
   };
 
   if (stashLoading) return <div>Loading performer</div>;
@@ -83,7 +83,7 @@ const PerformerResult: React.FC<IPerformerResultProps> = ({
           <OptionalField
             exclude={selectedID === undefined}
             setExclude={(v) =>
-              v ? handlePerformerSkip() : setSelectedID(matchedPerformer.id)
+              v ? handleSkip() : setSelectedID(matchedPerformer.id)
             }
           >
             <div>
@@ -127,16 +127,14 @@ 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}
-          className={cx("performer-select", {
-            "performer-select-active": selectedSource === "existing",
-          })}
+          onSelect={handleSelect}
+          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
@@ -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;