diff --git a/CHANGELOG.md b/CHANGELOG.md index 161c4398..9433686b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,15 @@ All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. +## [2.14.0](https://github.com/uzh-bf/design-system/compare/v2.13.3...v2.14.0) (2024-08-12) + + +### Other + +* **forms/NewFormikDateField:** add option to set field touched directly on change ([bb4072c](https://github.com/uzh-bf/design-system/commit/bb4072c2733c1d8a701a0968d572d9ae14f7fdf9)) + + + ## [3.0.0-alpha.11](https://github.com/uzh-bf/design-system/compare/v3.0.0-alpha.10...v3.0.0-alpha.11) (2024-08-09) @@ -87,7 +96,6 @@ All notable changes to this project will be documented in this file. See [standa ## [3.0.0-alpha.0](https://github.com/uzh-bf/design-system/compare/v2.13.3...v3.0.0-alpha.0) (2024-08-08) - ### Features * transform to monorepo and prepare for web components ([#75](https://github.com/uzh-bf/design-system/issues/75)) ([557b339](https://github.com/uzh-bf/design-system/commit/557b339e6e0e8da9f3a73aa05854a5c9f6b4b1e9)) diff --git a/packages/design-system/src/forms/NewFormikDateField.tsx b/packages/design-system/src/forms/NewFormikDateField.tsx index 764651e7..aa4d7856 100644 --- a/packages/design-system/src/forms/NewFormikDateField.tsx +++ b/packages/design-system/src/forms/NewFormikDateField.tsx @@ -19,6 +19,7 @@ export interface NewFormikDateFieldProps { tooltip?: string | React.ReactNode required?: boolean hideError?: boolean + touchedOnChange?: boolean disabled?: boolean className?: { root?: string @@ -44,6 +45,7 @@ export interface NewFormikDateFieldProps { * @param tooltip - The optional tooltip is shown on hover next to the label. * @param required - Indicate whether the field is required or not. * @param hideError - Hide the error message below this component as is might be more appropriate to show it somewhere else. + * @param touchedOnChange - Indicate whether the field should be marked as touched on change. * @param disabled - Disable the field. * @param className - The optional className object allows you to override the default styling. * @returns Date field component with Formik state management. @@ -58,6 +60,7 @@ export function NewFormikDateField({ tooltip, required = false, hideError = false, + touchedOnChange = false, disabled = false, className, ...props @@ -101,6 +104,10 @@ export function NewFormikDateField({ onChange={(e) => { if (e.target['validity'].valid) { helpers.setValue(e.target['value']) + + if (touchedOnChange) { + helpers.setTouched(true) + } } }} onBlur={() => helpers.setTouched(true)}