diff --git a/packages/chakra-components/src/components/Election/Questions/Fields.tsx b/packages/chakra-components/src/components/Election/Questions/Fields.tsx index 946f436..795b44c 100644 --- a/packages/chakra-components/src/components/Election/Questions/Fields.tsx +++ b/packages/chakra-components/src/components/Election/Questions/Fields.tsx @@ -78,8 +78,9 @@ export const MultiChoice = ({ index, question }: QuestionProps) => { } const choices = [...question.choices] - // Put can abstain on a separated variable to avoid typing errors on validation function + // Put can abstain and minChoices on a separated variable to avoid typing errors on validation function const canAbstain = election.resultsType.properties.canAbstain + const minChoices = election.resultsType?.properties?.numChoices?.min return ( @@ -91,6 +92,15 @@ export const MultiChoice = ({ index, question }: QuestionProps) => { // allow a single selection if is an abstain if (canAbstain && v && v.length < election.voteType.maxCount!) return true + // If there are min choices, validate that the user has selected at least that amount + if (minChoices) { + if (v && v.length >= minChoices && v.length <= election.voteType.maxCount) { + return true + } + return localize('validation.min_choices_count', { count: minChoices }) + } + + // If no minChoices configured, selected choices must be the maxCount return ( (v && v.length === election.voteType.maxCount) || localize('validation.choices_count', { count: election.voteType.maxCount }) @@ -123,6 +133,7 @@ export const MultiChoice = ({ index, question }: QuestionProps) => { if (maxSelected) return onChange([...values, e.target.value]) } + trigger(index) // Manually trigger validation }} > diff --git a/packages/chakra-components/src/i18n/locales.ts b/packages/chakra-components/src/i18n/locales.ts index b7ffb09..cedd4a9 100644 --- a/packages/chakra-components/src/i18n/locales.ts +++ b/packages/chakra-components/src/i18n/locales.ts @@ -92,6 +92,7 @@ export const locales = { required: 'This field is required', min_length: 'This field must be at least {{ min }} characters long', choices_count: 'Select {{ count }} choices', + min_choices_count: 'Select minimum of {{ count }} choices', at_least_one: 'You must select at least one option', }, // questions and vote button