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 = ({ mode }) => { const [formValues, setFormValues] = useState(initialFormValues); const [locations, setLocations] = useState([]); const [countries, setCountries] = useState([]); + const [selectedCountries, setSelectedCountries] = useState([]); const handleChange = ( e: @@ -97,9 +98,13 @@ export const EventAction: React.FC = ({ 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 = ({ mode }) => { Countries - + {(isCreateForm || selectedCountries.length > 0) && ( + + )} Help Needed?