From b3fe24894a0aa326c8966b1f689bffe61264556a Mon Sep 17 00:00:00 2001
From: Jackson <jackson@192.168.1.65>
Date: Mon, 21 Jul 2025 10:20:15 +0300
Subject: [PATCH] Format drop down

---
 src/pages/eventAction/EventAction.scss |  6 ++++++
 src/pages/eventAction/EventAction.tsx  | 23 +++++++++++++++--------
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/pages/eventAction/EventAction.scss b/src/pages/eventAction/EventAction.scss
index 02b19b5..1c253d0 100644
--- a/src/pages/eventAction/EventAction.scss
+++ b/src/pages/eventAction/EventAction.scss
@@ -14,4 +14,10 @@
   .selectMultiple {
     min-width: 300px;
   }
+  .rmsc .select-item {
+    &.selected,
+    &:hover {
+      width: 100%;
+    }
+  }
 }
diff --git a/src/pages/eventAction/EventAction.tsx b/src/pages/eventAction/EventAction.tsx
index d2cbeaf..05ab3c5 100644
--- a/src/pages/eventAction/EventAction.tsx
+++ b/src/pages/eventAction/EventAction.tsx
@@ -43,6 +43,7 @@ export const EventAction: React.FC<Props> = ({ mode }) => {
   const [formValues, setFormValues] = useState<FormProps>(initialFormValues);
   const [locations, setLocations] = useState<any>([]);
   const [countries, setCountries] = useState<any>([]);
+  const [selectedCountries, setSelectedCountries] = useState<any>([]);
 
   const handleChange = (
     e:
@@ -97,9 +98,13 @@ export const EventAction: React.FC<Props> = ({ mode }) => {
     return selectedValues;
   };
 
+  useEffect(() => {
+    setSelectedCountries(getSelectedValues(formValues['countries']));
+  }, [locations]);
+
   const getOptions = (): any =>
     locations.reduce((a: any, c: any) => {
-      a.push({ label: c.country, value: c.id });
+      a.push({ label: c.country, value: c.country });
       return a;
     }, []);
 
@@ -267,13 +272,15 @@ export const EventAction: React.FC<Props> = ({ mode }) => {
         </FormControl>
         <FormControl display={'flex'} gap={3} mb={5}>
           <FormLabel textAlign={'end'}>Countries</FormLabel>
-          <SelectMultiple
-            options={getOptions()}
-            loading={false}
-            label={'countries'}
-            onChange={setCountries}
-            selectedValues={getSelectedValues(formValues['countries'])}
-          />
+          {(isCreateForm || selectedCountries.length > 0) && (
+            <SelectMultiple
+              options={getOptions()}
+              loading={false}
+              label={'countries'}
+              onChange={setCountries}
+              selectedValues={selectedCountries}
+            />
+          )}
         </FormControl>
         <FormControl display={'flex'} gap={3} mb={5}>
           <FormLabel textAlign={'end'}>Help Needed?</FormLabel>