How should the Select all functionality be implemented using the array?

[oleksandr-danylchenko]

Context

I have a list of items with checkboxes and the "Select all" option in my form:

The items in the list are defined in an array that comes from props. The "Select all" is checked when selected item IDs match all the passed items.

Here's the form definition:

const form = useForm<CopyConfig>({
	defaultValues: { targetCourseIds: [] },
	validators: {
		onChange: ({ value }) => {
			const { targetCourseIds } = value;
			if (targetCourseIds.length === 0) {
				return 'At least one course must be selected';
			}
		}
	},
	onSubmit: ({ value }) => onSubmit(value)
});

const copyTargetIds = useMemo(() => copyTargets.map(({ id }) => id), [copyTargets]);
const allCourseIdsChecked = useStore(
	form.store,
	({ values: { targetCourseIds } }) => targetCourseIds.length === copyTargetIds.length
);

const handleCourseIdsChange = useCallback(
	async (event: ChangeEvent<HTMLInputElement>) => {
		const { name, checked } = event.target;

		if (name === 'all') {
			form.setFieldValue('targetCourseIds', checked ? copyTargetIds : []);
			return;
		}

		const courseId = Number(name);
		if (checked) {
			form.pushFieldValue('targetCourseIds', courseId);
		} else {
			await form.removeFieldValue(
				'targetCourseIds',
				form.getFieldValue('targetCourseIds').indexOf(courseId)
			);
		}
	},
	[copyTargetIds, form]
);

<form.Field name="targetCourseIds">
	{(field) => (
		<FormControl component="fieldset" variant="standard" css={styles.fieldset}>
			<FormLabel component="legend" focused={false} css={styles.legend}>
				Which of your other sections would you like to copy these notes to?
			</FormLabel>
			<FormGroup css={styles.group}>
				<FormControlLabel
					label="Select all"
					control={
						<Checkbox
							name="all"
							checked={allCourseIdsChecked}
							disableRipple
							css={styles.checkbox}
							onChange={handleCourseIdsChange}
						/>
					}
				/>
				{copyTargets.map(({ id, label }) => (
					<FormControlLabel
						key={id}
						label={label}
						control={
							<Checkbox
								name={`${id}`}
								checked={field.state.value.includes(id)}
								disableRipple
								css={styles.checkbox}
								onChange={handleCourseIdsChange}
							/>
						}
					/>
				))}
			</FormGroup>
		</FormControl>
	)}
</form.Field>

Issue

When I check the all option and run the form.setFieldValue('targetCourseIds', checked ? copyTargetIds : []) - it doesn't trigger the onChange validation! Therefore, when I extend the form with additional required fields - the canSubmit remains true. However, I expect it to be processed as a user-initiated change.

What is an optimal way to apply the bulk updates to the field that will also trigger the onChange validation?

[oleksandr-danylchenko]

UPD: I found that the form/field can be manually validated using the following methods:

• validateField()
• validateAllFields()
• validateArrayFieldsStartingFrom()

Therefore, the handleCourseIdsChange can be updated in the following way:

if (name === 'all') {
	form.setFieldValue('targetCourseIds', checked ? copyTargetIds : []);
+	await form.validateField('targetCourseIds', 'change');
	return;
}

That forces the validation to run and properly change the canSubmit value!