FLOW-1958 f-select bug fixes (#281)

ollionorg · Jun 14, 2024 · 2030461 · 2030461
1 parent 40a1fee
commit 2030461
Show file tree

Hide file tree

Showing 9 changed files with 36 additions and 16 deletions.
diff --git a/packages/flow-core/CHANGELOG.md b/packages/flow-core/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 # Change Log
 
+## [2.9.14] - 2024-06-14
+
+### Bug Fixes
+
+- `f-select` outside click detection improved
+
 ## [2.9.13] - 2024-06-11
 
 ### Improvements

diff --git a/packages/flow-core/package.json b/packages/flow-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ollion/flow-core",
-  "version": "2.9.13",
+  "version": "2.9.14",
   "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-select/f-select.ts b/packages/flow-core/src/components/f-select/f-select.ts
@@ -297,8 +297,16 @@ export class FSelect extends FRoot {
 		else return undefined;
 	}
 	outsideClick = (e: MouseEvent) => {
-		if (!this.contains(e.target as HTMLInputElement) && this.openDropdown) {
-			this.handleDropDownClose(e, false);
+		const rect = this.getBoundingClientRect();
+		const optionsRect = this.optionElement.getBoundingClientRect();
+		const isInsideClick =
+			e.clientX > rect.left &&
+			e.clientX < rect.left + rect.width &&
+			e.clientY > optionsRect.top &&
+			e.clientY < optionsRect.top + optionsRect.height;
+
+		if (!isInsideClick && this.openDropdown) {
+			this.handleDropDownClose(e, true);
 		}
 	};
 	containerScroll = () => {

diff --git a/packages/flow-core/src/components/f-select/handlers.ts b/packages/flow-core/src/components/f-select/handlers.ts
@@ -325,7 +325,7 @@ export function handleKeyDown(this: FSelect, e: KeyboardEvent) {
 				currentHover.click();
 			}
 		} else if (e.code === "Escape") {
-			this.handleDropDownClose(e);
+			this.handleDropDownClose(e, true);
 		}
 	} else if (!this.openDropdown && (e.code === "ArrowDown" || e.code === "ArrowUp")) {
 		this.handleDropDownOpen(e);

diff --git a/packages/flow-form-builder/CHANGELOG.md b/packages/flow-form-builder/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 # Change Log
 
+## [2.4.3] - 2024-06-14
+
+### Patch Changes
+
+- `select` with multiple selection empty array validation fixed
+
 ## [2.4.2] - 2024-05-15
 
 ### Patch Changes

diff --git a/packages/flow-form-builder/package.json b/packages/flow-form-builder/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ollion/flow-form-builder",
-  "version": "2.4.2",
+  "version": "2.4.3",
   "description": "Form builder for the flow design system",
   "module": "dist/flow-form-builder.es.js",
   "main": "dist/flow-form-builder.cjs.js",

diff --git a/packages/flow-form-builder/src/components/f-form-builder/fields/select.ts b/packages/flow-form-builder/src/components/f-form-builder/fields/select.ts
@@ -25,25 +25,25 @@ export default function (
 			.options=${field.options}
 			.value=${value}
 			?checkbox=${field.checkbox}
-			.clear=${ifDefined(field.clear)}
+			.clear=${field.clear}
 			.width=${field.width}
 			.maxOptionsWidth=${field.maxOptionsWidth}
 			.useVirtualizer=${field.useVirtualizer}
-			data-qa-element-id=${field.qaId || field.id}
+			data-qa-element-id=${ifDefined(field.qaId || field.id)}
 			height=${ifDefined(field.height)}
 			?disabled=${field.disabled}
 			selection-limit=${ifDefined(field.selectionLimit)}
 			?create-option=${field.createOption}
 			?loading=${field.loading ?? false}
 			.optionTemplate=${field.optionTemplate}
 			icon-left=${ifDefined(field.iconLeft)}
-			@click=${ifDefined(field.onClick)}
-			@focus=${ifDefined(field.onFocus)}
-			@input=${ifDefined(field.onInput)}
-			@keypress=${ifDefined(field.onKeyPress)}
-			@keydown=${ifDefined(field.onKeyDown)}
-			@keyup=${ifDefined(field.onKeyUp)}
-			@mouseover=${ifDefined(field.onMouseOver)}
+			@click=${field.onClick}
+			@focus=${field.onFocus}
+			@input=${field.onInput}
+			@keypress=${field.onKeyPress}
+			@keydown=${field.onKeyDown}
+			@keyup=${field.onKeyUp}
+			@mouseover=${field.onMouseOver}
 		>
 			${getSlots(name, field)}
 		</f-select>

diff --git a/packages/flow-form-builder/src/modules/validation/validator.ts b/packages/flow-form-builder/src/modules/validation/validator.ts
@@ -44,7 +44,7 @@ export default async function validate(
 			/**
 			 * This will avoid validation rules called multiple time in silent validation
 			 */
-			if (r._lastValue === value && r._lastResult !== undefined) {
+			if (r._lastValue === value && r._lastResult !== undefined && typeof value !== "object") {
 				result = r._lastResult;
 				if (!result) {
 					rule = r.name;

diff --git a/stories/flow-form-builder/f-formbuilder-field.ts b/stories/flow-form-builder/f-formbuilder-field.ts
@@ -89,7 +89,7 @@ const field: FormBuilderField = {
 			options: ["option 1", "option 2", "option 3"],
 			type: "select",
 			placeholder: "This is a placeholder",
-
+			selection: "multiple",
 			disabled: false,
 			searchable: true,
 			clear: false,