From 0c05e984277b7270da81677db5514cdb6e4a1fa8 Mon Sep 17 00:00:00 2001 From: Stefan Dimitrov Date: Wed, 3 Sep 2025 09:16:03 +0300 Subject: [PATCH] feat(ui5-tokenizer): enable tokenizer in forms POC --- packages/main/src/Tokenizer.ts | 27 +- packages/main/test/pages/form/FormBasic.html | 273 ++++++++++++++----- 2 files changed, 233 insertions(+), 67 deletions(-) diff --git a/packages/main/src/Tokenizer.ts b/packages/main/src/Tokenizer.ts index 0a8f631d3ed7..cf93f44deaba 100644 --- a/packages/main/src/Tokenizer.ts +++ b/packages/main/src/Tokenizer.ts @@ -13,6 +13,7 @@ import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/Acc import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js"; import { getFocusedElement } from "@ui5/webcomponents-base/dist/util/PopupUtils.js"; import ScrollEnablement from "@ui5/webcomponents-base/dist/delegate/ScrollEnablement.js"; +import type { IFormInputElement } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; import type { I18nText } from "@ui5/webcomponents-base/dist/i18nBundle.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; @@ -140,6 +141,7 @@ enum ClipboardDataOperation { @customElement({ tag: "ui5-tokenizer", languageAware: true, + formAssociated: true, renderer: jsxRenderer, template: TokenizerTemplate, styles: [ @@ -186,7 +188,7 @@ enum ClipboardDataOperation { bubbles: true, }) -class Tokenizer extends UI5Element { +class Tokenizer extends UI5Element implements IFormInputElement { eventDetails!: { "token-delete": TokenizerTokenDeleteEventDetail, "selection-change": TokenizerSelectionChangeEventDetail, @@ -216,6 +218,9 @@ class Tokenizer extends UI5Element { @property({ type: Boolean }) multiLine = false; + @property({type: String}) + declare name?: string; + /** * Defines whether "Clear All" button is present. Ensure `multiLine` is enabled, otherwise `showClearAll` will have no effect. * @@ -357,6 +362,26 @@ class Tokenizer extends UI5Element { this._nMoreCount = this.overflownTokens.length; } + get formFormattedValue(): FormData | null | string { + const tokens = this.tokens || []; + + console.log(this.tokens); + + if (this.name && tokens.length) { + const formData = new FormData(); + + + for(let i = 0; i < this.tokens.length; i++) { + formData.append(this.name, this.tokens[i].text || ""); + } + + return formData; + } + + return null; + + } + constructor() { super(); diff --git a/packages/main/test/pages/form/FormBasic.html b/packages/main/test/pages/form/FormBasic.html index 62b76faa9576..27b7d267058a 100644 --- a/packages/main/test/pages/form/FormBasic.html +++ b/packages/main/test/pages/form/FormBasic.html @@ -6,7 +6,6 @@ Form Basic - + + + + Tokens: + + + + + + + + + MultiInput: + +
Token is already in the list
+ + + + + Submit + + + +



@@ -598,12 +728,12 @@ Name: Red Point Stores - + ZIP Code/City: 411 Maintown - + Street: Main St 1618 @@ -637,22 +767,22 @@ Name: Red Point Stores - + ZIP Code/City: 411 Maintown - + Street: Main St 1618 - + Country: Germany - + WebSite: sap.com @@ -664,22 +794,22 @@ Twitter: @sap - + Email: john.smith@sap.com - + Tel: +49 6227 747474 - + SMS: +49 6227 747474 - + Mobile: +49 6227 747474 @@ -698,7 +828,7 @@ - +



@@ -710,22 +840,22 @@ Name: Red Point Stores - + ZIP Code/City: 411 Maintown - + Street: Main St 1618 - + Country: Germany - + WebSite: sap.com @@ -737,22 +867,22 @@ Twitter: @sap - + Email: john.smith@sap.com - + Tel: +49 6227 747474 - + SMS: +49 6227 747474 - + Mobile: +49 6227 747474 @@ -769,28 +899,28 @@ - + Name: Red Point Stores - + ZIP Code/City: 411 Maintown - + Street: Main St 1618 - + Country: Germany - + WebSite: sap.com @@ -811,22 +941,22 @@ Name: Red Point Stores - + ZIP Code/City: 411 Maintown - + Street: Main St 1618 - + Country: Germany - + WebSite: sap.com @@ -838,22 +968,22 @@ Twitter: @sap - + Email: john.smith@sap.com - + Tel: +49 6227 747474 - + SMS: +49 6227 747474 - + Mobile: +49 6227 747474 @@ -870,28 +1000,28 @@ - + Name: Red Point Stores - + ZIP Code/City: 411 Maintown - + Street: Main St 1618 - + Country: Germany - + WebSite: sap.com @@ -911,22 +1041,33 @@ Name: Red Point Stores - + + + ZIP Code/City: + + + + + + + + Submit + ZIP Code/City: 411 Maintown - + Street: Main St 1618 - + Country: Germany - + WebSite: sap.com @@ -938,22 +1079,22 @@ Twitter: @sap - + Email: john.smith@sap.com - + Tel: +49 6227 747474 - + SMS: +49 6227 747474 - + Mobile: +49 6227 747474 @@ -970,28 +1111,28 @@ - + Name: Red Point Stores - + ZIP Code/City: 411 Maintown - + Street: Main St 1618 - + Country: Germany - + WebSite: sap.com @@ -1008,7 +1149,7 @@ Name: - + ZIP Code/City: @@ -1020,7 +1161,7 @@ - + Country: