Merge branch 'main' of https://github.com/uzh-bf/design-system into dev

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))

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)}