From 20304614eda4870028142837a698bb6dfcfff38e Mon Sep 17 00:00:00 2001 From: Vikas Awaghade <67629551+vikas-cldcvr@users.noreply.github.com> Date: Fri, 14 Jun 2024 12:40:27 +0530 Subject: [PATCH] FLOW-1958 f-select bug fixes (#281) --- packages/flow-core/CHANGELOG.md | 6 ++++++ packages/flow-core/package.json | 2 +- .../src/components/f-select/f-select.ts | 12 ++++++++++-- .../src/components/f-select/handlers.ts | 2 +- packages/flow-form-builder/CHANGELOG.md | 6 ++++++ packages/flow-form-builder/package.json | 2 +- .../components/f-form-builder/fields/select.ts | 18 +++++++++--------- .../src/modules/validation/validator.ts | 2 +- .../flow-form-builder/f-formbuilder-field.ts | 2 +- 9 files changed, 36 insertions(+), 16 deletions(-) diff --git a/packages/flow-core/CHANGELOG.md b/packages/flow-core/CHANGELOG.md index 18eb9fb10..f0e40ddcd 100644 --- 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 index 19ff87ace..2a12f16a4 100644 --- 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 index 24c81ea3f..beabd5a68 100644 --- 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 index 026718cc6..1048f39c9 100644 --- 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 index 2985dd0d9..e75b637fd 100644 --- 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 index 6ed9e0b68..73c2aea81 100644 --- 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 index 38795ced3..2fd0aac2b 100644 --- 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,11 +25,11 @@ 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)} @@ -37,13 +37,13 @@ export default function ( ?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)} diff --git a/packages/flow-form-builder/src/modules/validation/validator.ts b/packages/flow-form-builder/src/modules/validation/validator.ts index 809daa3db..852e742a7 100644 --- 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 index b6a191d96..40caaa864 100644 --- 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,