From 0a3bd68babe3b3a9c7b44da27e461b15f2abeb07 Mon Sep 17 00:00:00 2001 From: Chris Thielen Date: Thu, 20 Jun 2019 10:05:46 -0700 Subject: [PATCH] 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. --- .../src/presentation/forms/inputs/ChecklistInput.tsx | 11 ++++++++++- .../core/src/presentation/forms/inputs/utils.ts | 2 +- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/app/scripts/modules/core/src/presentation/forms/inputs/ChecklistInput.tsx b/app/scripts/modules/core/src/presentation/forms/inputs/ChecklistInput.tsx index d6c38736518..adf8d4981cb 100644 --- a/app/scripts/modules/core/src/presentation/forms/inputs/ChecklistInput.tsx +++ b/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> { 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 || []; diff --git a/app/scripts/modules/core/src/presentation/forms/inputs/utils.ts b/app/scripts/modules/core/src/presentation/forms/inputs/utils.ts index 57a6dd98456..4407337077c 100644 --- a/app/scripts/modules/core/src/presentation/forms/inputs/utils.ts +++ b/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); -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);