diff --git a/publisher/src/components/MetricsConfiguration/ModalForm.styled.tsx b/publisher/src/components/MetricsConfiguration/ModalForm.styled.tsx
index b51a11461..68581ddab 100644
--- a/publisher/src/components/MetricsConfiguration/ModalForm.styled.tsx
+++ b/publisher/src/components/MetricsConfiguration/ModalForm.styled.tsx
@@ -170,11 +170,3 @@ export const ContextLabel = styled.div`
color: ${palette.highlight.grey8};
margin-bottom: 16px;
`;
-
-export const InputWrapper = styled.div`
- margin-bottom: 16px;
-
- textarea {
- height: 100px;
- }
-`;
diff --git a/publisher/src/components/MetricsConfiguration/RaceEthnicitiesModalForm.tsx b/publisher/src/components/MetricsConfiguration/RaceEthnicitiesModalForm.tsx
index 357513fb0..143952101 100644
--- a/publisher/src/components/MetricsConfiguration/RaceEthnicitiesModalForm.tsx
+++ b/publisher/src/components/MetricsConfiguration/RaceEthnicitiesModalForm.tsx
@@ -21,7 +21,6 @@ import {
CheckboxOption,
CheckboxOptions,
} from "@justice-counts/common/components/CheckboxOptions";
-import { NewInput } from "@justice-counts/common/components/Input";
import {
RadioButton,
RadioButtonsWrapper,
@@ -119,18 +118,46 @@ function RaceEthnicitiesModalForm({
}
: undefined;
+ const currentOtherDescription =
+ Object.values(
+ Object.entries(ethnicitiesByRace).find(
+ ([race]) => race === "Other"
+ )?.[1] || {}
+ ).find((ethnicity) => {
+ if (!canSpecifyEthnicity && !specifiesHispanicAsRace)
+ return ethnicity.key === "Other / Unknown Ethnicity";
+
+ if (!canSpecifyEthnicity && specifiesHispanicAsRace)
+ return ethnicity.key === "Other / Not Hispanic or Latino";
+
+ return ethnicity.key === "Other / Hispanic or Latino";
+ })?.other_description || "";
+
+ const [otherDescription, setOtherDescription] = useState(
+ currentOtherDescription
+ );
+
const raceEthnicityOptions: CheckboxOption[] = [
...(hispanicOrLatinoOption ? [hispanicOrLatinoOption] : []),
...Object.entries(racesStatusObject).map(([race, enabled]) => {
const disabledUnknownRace =
race === "Unknown" && specifiesHispanicAsRace && !canSpecifyEthnicity;
+ const otherDescriptionParams = {
+ isEnabled: race === "Other" && Boolean(enabled),
+ placeholder:
+ "Please describe additional definition/clarification of the 'Other' selection.",
+ value: currentOtherDescription,
+ onChange: (value: string) => setOtherDescription(value),
+ };
+
return {
key: race,
label: race,
checked: Boolean(enabled),
disabled: disabledUnknownRace,
icon: disabledUnknownRace ? : undefined,
+ otherDescription: otherDescriptionParams,
};
}),
];
@@ -145,9 +172,6 @@ function RaceEthnicitiesModalForm({
return "NO_ETHNICITY_HISPANIC_NOT_SPECIFIED";
};
- const [isOtherChecked, setOtherChecked] = useState(false);
- const [otherDescription, setOtherDescription] = useState("");
-
const handleUpdateRacesDimensions = () => {
if (!systemSearchParam || !metricSearchParam) return;
const currentState = determineCurrentState();
@@ -212,25 +236,9 @@ function RaceEthnicitiesModalForm({
capture for race?
- {isOtherChecked && (
-
- setOtherDescription(e.target.value)}
- fullWidth
- />
-
- )}
{
- if (key === "Other") {
- setOtherChecked(!checked);
- }
setRacesStatusObject({
...racesStatusObject,
[key]: !checked,
diff --git a/publisher/src/stores/MetricConfigStore.tsx b/publisher/src/stores/MetricConfigStore.tsx
index 960c479c3..de5f93569 100644
--- a/publisher/src/stores/MetricConfigStore.tsx
+++ b/publisher/src/stores/MetricConfigStore.tsx
@@ -1193,13 +1193,15 @@ class MetricConfigStore {
raceEthnicitiesDimensions &&
(Object.values(raceEthnicitiesDimensions) as UpdatedDimension[]);
- if (otherDescription) {
- const otherDimension = dimensions.find(
- (dimension) => dimension.race === "Other" && dimension.enabled
- );
- if (otherDimension) {
- otherDimension.other_description = otherDescription;
- }
+ if (otherDescription !== undefined) {
+ dimensions
+ .filter((dimension) => dimension.race === "Other")
+ .forEach((otherDimension) => {
+ const updatedDimension = otherDimension;
+ updatedDimension.other_description = otherDimension.enabled
+ ? otherDescription
+ : "";
+ });
}
/** Return an object w/ all dimensions in the desired backend data structure for saving purposes */