feat(core/presentation): Always call onBlur in Checklist to "mark as …

…touched" (#7134)

Also: mark `stringOptions` as `readonly` to allow read only arrays of options to be provided.

app/scripts/modules/core/src/presentation/forms/inputs/ChecklistInput.tsx

@@ -3,9 +3,11 @@ import { IFormInputProps, OmitControlledInputPropsFrom } from '../interface';
 
 import { createFakeReactSyntheticEvent, isStringArray, orEmptyString, validationClassName } from './utils';
 
+const { useEffect } = React;
+
 interface IChecklistInputProps extends IFormInputProps, OmitControlledInputPropsFrom<React.InputHTMLAttributes<any>> {
   options?: IChecklistInputOption[];
-  stringOptions?: string[];
+  stringOptions?: readonly string[];
   inline?: boolean;
   showSelectAll?: boolean;
 }
@@ -28,6 +30,13 @@ export function ChecklistInput(props: IChecklistInputProps) {
     ...otherProps
   } = props;
 
+  // Naively call the the field's onBlur handler
+  // This is what Formik uses to mark the field as touched
+  function touchField() {
+    props.onBlur && props.onBlur(createFakeReactSyntheticEvent({ name: props.name, value }));
+  }
+  useEffect(touchField, []);
+
   const className = `${orEmptyString(inputClassName)} ${validationClassName(validation)}`;
 
   const selectedValues = value || [];

app/scripts/modules/core/src/presentation/forms/inputs/utils.ts

@@ -24,4 +24,4 @@ export const createFakeReactSyntheticEvent = (target: { name?: string; value?: a
     target,
   } as React.ChangeEvent<any>);
 
-export const isStringArray = (opts: any[]): opts is string[] => opts && opts.length && opts.every(isString);
+export const isStringArray = (opts: readonly any[]): opts is string[] => opts && opts.length && opts.every(isString);