FLOW-964 f-date-picker blur event issue fixed (#193)

ollionorg · Nov 20, 2023 · 0b02f98 · 0b02f98
1 parent 5973502
commit 0b02f98
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 2 deletions.
diff --git a/packages/flow-core/CHANGELOG.md b/packages/flow-core/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 # Change Log
 
+## [2.2.3] - 2023-11-20
+
+### Bug Fixes
+
+- `f-date-time-picker` : prevent the blur event from propagating when the date picker is open and date is selected. (It was validating value before input event in f-form-builder)
+
 ## [2.2.2] - 2023-11-10
 
 ### Bug Fixes

diff --git a/packages/flow-core/package.json b/packages/flow-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cldcvr/flow-core",
-  "version": "2.2.2",
+  "version": "2.2.3",
   "description": "Core package of flow design system",
   "module": "dist/flow-core.es.js",
   "main": "dist/flow-core.cjs.js",

diff --git a/packages/flow-core/src/components/f-date-time-picker/f-date-time-picker.ts b/packages/flow-core/src/components/f-date-time-picker/f-date-time-picker.ts
@@ -352,6 +352,11 @@ export class FDateTimePicker extends FRoot {
 					this.flatPickerElement?.close();
 					this.dateTimePickerElement.inputElement.focus();
 				}}
+				@blur=${(e: FocusEvent) => {
+					if (this.flatPickerElement?.isOpen) {
+						e.stopPropagation();
+					}
+				}}
 				@input=${this.handleKeyboardInput}
 				?read-only=${this["is-range"]}
 			>

diff --git a/stories/flow-form-builder/f-formbuilder-field.ts b/stories/flow-form-builder/f-formbuilder-field.ts
@@ -298,7 +298,12 @@ const field: FormBuilderField = {
 			type: "datetime",
 			label: {
 				title: "This is date time field"
-			}
+			},
+			validationRules: [
+				{
+					name: "required"
+				}
+			]
 		},
 		nestedObject: {
 			type: "object",