fix weird behaviour when selecting and clicking away

bcgov · Oct 31, 2023 · e5eb00c · e5eb00c
1 parent d6892ac
commit e5eb00c
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 61 deletions.
diff --git a/epictrack-web/src/components/shared/controlledInputComponents/ControlledMultiSelect.tsx b/epictrack-web/src/components/shared/controlledInputComponents/ControlledMultiSelect.tsx
@@ -1,10 +1,9 @@
 import React from "react";
-import { Box, FormHelperText } from "@mui/material";
+import { FormHelperText } from "@mui/material";
 import { Controller, useFormContext } from "react-hook-form";
 import Select, { CSSObjectWithLabel } from "react-select";
 import { Palette } from "../../../styles/theme";
-import Option from "./Option";
-import MultiValue from "./MultiValue";
+import Option from "./ControlledMultiSelect/Option";
 
 type IFormInputProps = {
   placeholder?: string;
@@ -45,7 +44,10 @@ const ControlledSelectV2: React.ForwardRefRenderFunction<
   ref
 ) => {
   const [selectedOptions, setSelectedOptions] = React.useState<any>([]);
-  const [label, setLabel] = React.useState("");
+
+  React.useEffect(() => {
+    setSelectedOptions(Array.from(new Set<string>(defaultValue)));
+  }, [defaultValue]);
 
   const handleChange = (item: any) => {
     const selected: Array<any> = [];
@@ -56,24 +58,6 @@ const ControlledSelectV2: React.ForwardRefRenderFunction<
     setSelectedOptions(Array.from(new Set<string>(selected)));
   };
 
-  React.useEffect(() => {
-    setSelectedOptions(Array.from(new Set<string>(defaultValue)));
-  }, [defaultValue]);
-
-  React.useEffect(() => {
-    let title = "";
-    options.map((o) => {
-      if (selectedOptions.includes(getOptionValue(o))) {
-        if (title) {
-          title += ", ";
-        }
-        title += getOptionLabel(o);
-      }
-    });
-    title = title.substring(0, 30);
-    setLabel(title);
-  }, [selectedOptions]);
-
   const {
     control,
     formState: { errors, defaultValues },
@@ -106,12 +90,10 @@ const ControlledSelectV2: React.ForwardRefRenderFunction<
                 options,
                 getOptionLabel,
                 getOptionValue,
-                label,
               }}
               components={{
                 Option,
                 MultiValueRemove: () => null,
-                MultiValue,
               }}
               value={options.filter((c) => {
                 if (isMulti && value) {
@@ -132,13 +114,6 @@ const ControlledSelectV2: React.ForwardRefRenderFunction<
               }}
               menuPortalTarget={document.body}
               styles={{
-                option: (baseStyles, state) => {
-                  return {
-                    ...baseStyles,
-                    backgroundColor: Palette.white,
-                    color: Palette.primary.accent.light,
-                  };
-                },
                 control: (baseStyles, state) => {
                   return {
                     ...baseStyles,
@@ -164,7 +139,8 @@ const ControlledSelectV2: React.ForwardRefRenderFunction<
                 }),
                 multiValue(base, props) {
                   return {
-                    backgroundColor: Palette.white,
+                    ...base,
+                    padding: "0px 4px 0px 2px",
                   };
                 },
               }}

diff --git a/...ared/controlledInputComponents/Option.tsx → ...mponents/ControlledMultiSelect/Option.tsx b/...ared/controlledInputComponents/Option.tsx → ...mponents/ControlledMultiSelect/Option.tsx
diff --git a/...track-web/src/components/shared/controlledInputComponents/ControlledMultiSelect/index.tsx b/...track-web/src/components/shared/controlledInputComponents/ControlledMultiSelect/index.tsx
diff --git a/epictrack-web/src/components/shared/controlledInputComponents/MultiValue.tsx b/epictrack-web/src/components/shared/controlledInputComponents/MultiValue.tsx
diff --git a/epictrack-web/src/components/workPlan/event/EventList.tsx b/epictrack-web/src/components/workPlan/event/EventList.tsx
@@ -696,7 +696,7 @@ const EventList = () => {
       </Grid>
       <TrackDialog
         open={showTaskForm}
-        dialogTitle="Add Task"
+        dialogTitle={taskEvent ? taskEvent?.name : "Add Task"}
         //onClose={(event, reason) => onDialogClose(event, reason)}
         disableEscapeKeyDown
         fullWidth