fix(ui) - filter issue dropdown selection update

frontend/app/components/shared/Filters/FilterValueDropdown/FilterValueDropdown.tsx

@@ -3,7 +3,6 @@ import { Icon } from 'UI';
 import stl from './FilterValueDropdown.module.css';
 import Select from 'Shared/Select';
 
-
 const dropdownStyles = {
   control: (provided: any) => {
     const obj = {
@@ -15,7 +14,7 @@ const dropdownStyles = {
       minHeight: '26px',
       borderRadius: '3px',
       boxShadow: 'none !important',
-    }
+    };
     return obj;
   },
   valueContainer: (provided: any) => ({
@@ -24,7 +23,7 @@ const dropdownStyles = {
     width: 'fit-content',
     alignItems: 'center',
     height: '26px',
-    padding: '0 3px'
+    padding: '0 3px',
   }),
   // placeholder: (provided: any) => ({
   //   ...provided,
@@ -39,14 +38,14 @@ const dropdownStyles = {
     whiteSpace: 'nowrap',
   }),
   menu: (provided: any, state: any) => ({
-      ...provided,
-      top: 20,
-      left: 0,
-      minWidth: 'fit-content',
-      overflow: 'hidden',
+    ...provided,
+    top: 20,
+    left: 0,
+    minWidth: 'fit-content',
+    overflow: 'hidden',
   }),
   container: (provided: any) => ({
-      ...provided,
+    ...provided,
     width: '100%',
   }),
   input: (provided: any) => ({
@@ -54,30 +53,29 @@ const dropdownStyles = {
     height: '22px',
     '& input:focus': {
       border: 'none !important',
-    }
+    },
   }),
-  singleValue: (provided: any, state: { isDisabled: any; }) => {
+  singleValue: (provided: any, state: { isDisabled: any }) => {
     const opacity = state.isDisabled ? 0.5 : 1;
     const transition = 'opacity 300ms';
 
     return {
-      ...provided, opacity, transition,
+      ...provided,
+      opacity,
+      transition,
       display: 'flex',
       alignItems: 'center',
       height: '20px',
     };
-  }
-}
+  },
+};
 interface Props {
-  // filter: any; // event/filter
-  // options: any[];
-  placeholder?: string
+  placeholder?: string;
   value: string;
   onChange: (value: any) => void;
   className?: string;
   options: any[];
   search?: boolean;
-  // multiple?: boolean;
   showCloseButton?: boolean;
   showOrButton?: boolean;
   onRemoveValue?: () => void;
@@ -85,34 +83,46 @@ interface Props {
   isMultilple?: boolean;
 }
 function FilterValueDropdown(props: Props) {
-  const { placeholder = 'Select', isMultilple = true, search = false, options, onChange, value, className = '', showCloseButton = true, showOrButton = true } = props;
-  // const options = []
+  const {
+    placeholder = 'Select',
+    isMultilple = true,
+    search = false,
+    options,
+    onChange,
+    value,
+    showCloseButton = true,
+    showOrButton = true,
+  } = props;
 
   return (
     <div className="relative flex items-center w-full">
-      <div className={stl.wrapper}>      
+      <div className={stl.wrapper}>
         <Select
           isSearchable={search}
-          // className={ cn(stl.operatorDropdown, className, "filterDropdown") }
-          options={ options }
+          options={options}
           name="issue_type"
-          defaultValue={ value }
-          onChange={ (value: any) => onChange(value.value) }
+          value={value ? options.find((item) => item.value === value) : null}
+          onChange={(value: any) => onChange(value.value)}
           placeholder={placeholder}
           styles={dropdownStyles}
         />
-        <div
-          className={stl.right}
-          // onClick={showOrButton ? onRemoveValue : onAddValue}
-        >
-          { showCloseButton && <div onClick={props.onRemoveValue}><Icon name="close" size="12" /></div> }
-          { showOrButton && <div onClick={props.onAddValue} className="color-teal"><span className="px-1">or</span></div> }
+        <div className={stl.right}>
+          {showCloseButton && (
+            <div onClick={props.onRemoveValue}>
+              <Icon name="close" size="12" />
+            </div>
+          )}
+          {showOrButton && (
+            <div onClick={props.onAddValue} className="color-teal">
+              <span className="px-1">or</span>
+            </div>
+          )}
         </div>
       </div>
 
-      { !showOrButton && isMultilple && <div className="ml-3">or</div> }
+      {!showOrButton && isMultilple && <div className="ml-3">or</div>}
     </div>
   );
 }
 
-export default FilterValueDropdown;
+export default FilterValueDropdown;