diff --git a/app/soapbox/features/ui/components/modals/report-modal/__tests__/report-modal.test.tsx b/app/soapbox/features/ui/components/modals/report-modal/__tests__/report-modal.test.tsx
index f50732146..28c36e58f 100644
--- a/app/soapbox/features/ui/components/modals/report-modal/__tests__/report-modal.test.tsx
+++ b/app/soapbox/features/ui/components/modals/report-modal/__tests__/report-modal.test.tsx
@@ -28,6 +28,7 @@ describe('', () => {
new: {
account_id: '1',
status_ids: ImmutableSet(['1']),
+ rule_ids: ImmutableSet(),
},
}),
statuses: ImmutableMap({
diff --git a/app/soapbox/features/ui/components/modals/report-modal/report-modal.tsx b/app/soapbox/features/ui/components/modals/report-modal/report-modal.tsx
index f2891c07d..5845afbb8 100644
--- a/app/soapbox/features/ui/components/modals/report-modal/report-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/report-modal/report-modal.tsx
@@ -84,7 +84,7 @@ const ReportModal = ({ onClose }: IReportModal) => {
const isBlocked = useAppSelector((state) => state.reports.getIn(['new', 'block']) as boolean);
const isSubmitting = useAppSelector((state) => state.reports.getIn(['new', 'isSubmitting']) as boolean);
const rules = useAppSelector((state) => state.rules.items);
- const ruleId = useAppSelector((state) => state.reports.getIn(['new', 'rule_id']) as string);
+ const ruleIds = useAppSelector((state) => state.reports.getIn(['new', 'rule_ids']) as ImmutableSet);
const selectedStatusIds = useAppSelector((state) => state.reports.getIn(['new', 'status_ids']) as ImmutableSet);
const shouldRequireRule = rules.length > 0;
@@ -152,8 +152,8 @@ const ReportModal = ({ onClose }: IReportModal) => {
return false;
}
- return isSubmitting || (shouldRequireRule && !ruleId) || selectedStatusIds.size === 0;
- }, [currentStep, isSubmitting, shouldRequireRule, ruleId, selectedStatusIds.size]);
+ return isSubmitting || (shouldRequireRule && ruleIds.isEmpty()) || selectedStatusIds.size === 0;
+ }, [currentStep, isSubmitting, shouldRequireRule, ruleIds, selectedStatusIds.size]);
const calculateProgress = useCallback(() => {
switch (currentStep) {
diff --git a/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx b/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx
index fa0ba4325..1badbe94f 100644
--- a/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx
+++ b/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx
@@ -8,6 +8,7 @@ import { fetchRules } from 'soapbox/actions/rules';
import { FormGroup, Stack, Text, Textarea } from 'soapbox/components/ui';
import { useAppSelector } from 'soapbox/hooks';
+import type { Set as ImmutableSet } from 'immutable';
import type { ReducerAccount } from 'soapbox/reducers/accounts';
const messages = defineMessages({
@@ -32,7 +33,7 @@ const ReasonStep = (_props: IReasonStep) => {
const comment = useAppSelector((state) => state.reports.getIn(['new', 'comment']) as string);
const rules = useAppSelector((state) => state.rules.items);
- const ruleId = useAppSelector((state) => state.reports.getIn(['new', 'rule_id']) as boolean);
+ const ruleIds = useAppSelector((state) => state.reports.getIn(['new', 'rule_ids']) as ImmutableSet);
const shouldRequireRule = rules.length > 0;
const handleCommentChange = (event: React.ChangeEvent) => {
@@ -87,7 +88,7 @@ const ReasonStep = (_props: IReasonStep) => {
ref={rulesListRef}
>
{rules.map((rule, idx) => {
- const isSelected = String(ruleId) === String(rule.id);
+ const isSelected = ruleIds.includes(String(rule.id));
return (