From f3fd08701f69bedab026fede1f4396e33f407ea9 Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Wed, 15 Nov 2023 09:03:34 +0200 Subject: [PATCH 1/9] feat: add 'value' property --- packages/base/package.json | 2 +- packages/fiori/package.json | 2 +- packages/localization/package.json | 2 +- packages/main/package.json | 2 +- packages/main/src/Select.ts | 25 ++++++++++++++++++++- packages/main/test/pages/SelectMenu.html | 17 +++++++++----- packages/main/test/specs/Select.spec.js | 11 ++++++--- packages/main/test/specs/SelectMenu.spec.js | 6 +++++ yarn.lock | 8 +++---- 9 files changed, 57 insertions(+), 18 deletions(-) diff --git a/packages/base/package.json b/packages/base/package.json index 3cf7f12e6fc8..d0cd2c523ab4 100644 --- a/packages/base/package.json +++ b/packages/base/package.json @@ -38,7 +38,7 @@ "@buxlabs/amd-to-es6": "0.16.1", "@openui5/sap.ui.core": "1.116.0", "@ui5/webcomponents-tools": "1.19.0", - "chromedriver": "117.0.3", + "chromedriver": "119.0.0", "clean-css": "^5.2.2", "copy-and-watch": "^0.1.5", "cross-env": "^7.0.3", diff --git a/packages/fiori/package.json b/packages/fiori/package.json index 412ab794df89..6ad02f2cde49 100644 --- a/packages/fiori/package.json +++ b/packages/fiori/package.json @@ -49,6 +49,6 @@ }, "devDependencies": { "@ui5/webcomponents-tools": "1.19.0", - "chromedriver": "117.0.3" + "chromedriver": "119.0.0" } } diff --git a/packages/localization/package.json b/packages/localization/package.json index e21c100be273..284814c600bc 100644 --- a/packages/localization/package.json +++ b/packages/localization/package.json @@ -30,7 +30,7 @@ "devDependencies": { "@openui5/sap.ui.core": "1.116.0", "@ui5/webcomponents-tools": "1.19.0", - "chromedriver": "117.0.3", + "chromedriver": "119.0.0", "mkdirp": "^1.0.4", "resolve": "^1.20.0" }, diff --git a/packages/main/package.json b/packages/main/package.json index d01287c17cab..d07b74d1d315 100644 --- a/packages/main/package.json +++ b/packages/main/package.json @@ -50,6 +50,6 @@ }, "devDependencies": { "@ui5/webcomponents-tools": "1.19.0", - "chromedriver": "117.0.3" + "chromedriver": "119.0.0" } } diff --git a/packages/main/src/Select.ts b/packages/main/src/Select.ts index 8735e2d3f2c9..a7f6f469b029 100644 --- a/packages/main/src/Select.ts +++ b/packages/main/src/Select.ts @@ -358,7 +358,7 @@ class Select extends UI5Element implements IFormElement { responsivePopover!: ResponsivePopover; selectedItem?: string | null; valueStatePopover?: Popover; - value!: string; + // value!: string; selectMenu?: SelectMenu; @@ -504,6 +504,29 @@ class Select extends UI5Element implements IFormElement { return staticAreaItem!.querySelector("[ui5-responsive-popover]")!; } + get value() { + return this.selectedOption?.value || this.selectedOption?.textContent || ""; + } + + set value(newValue: string) { + const option = this.getOptionByValue(newValue); + const prevSelectedOption = this.selectedOption; + + if (prevSelectedOption && option) { + prevSelectedOption.selected = false; + option.selected = true; + } + } + + getOptionByValue(value: string) { + const menu = this._getSelectMenu(); + + if (menu) { + return menu.options?.find((option: IOption) => (option.value || option.textContent) === value); + } + return this.options?.find((option: IOption) => (option.value || option.textContent) === value); + } + /** * Currently selected ui5-option element. * @readonly diff --git a/packages/main/test/pages/SelectMenu.html b/packages/main/test/pages/SelectMenu.html index e18887a10309..af029af7e483 100644 --- a/packages/main/test/pages/SelectMenu.html +++ b/packages/main/test/pages/SelectMenu.html @@ -52,6 +52,7 @@ Reset counters Focus out + select.value = "item1"
@@ -74,7 +75,7 @@ - +
T-shirt [1]
@@ -84,7 +85,7 @@
- +
Dress [2]
@@ -94,7 +95,7 @@
- +
Skirt [3]
@@ -174,15 +175,15 @@ - +
Item 1
 - +
Item 2
 - +
Item 3
 @@ -663,5 +664,9 @@ testOpen.value = testOpenCounter; testClose.value = testCloseCounter; }); + + btnSetValue.addEventListener("click", function(e) { + selTest.value = "item1"; + }); diff --git a/packages/main/test/specs/Select.spec.js b/packages/main/test/specs/Select.spec.js index 3d306c439c99..9ce9a0cc3ea5 100644 --- a/packages/main/test/specs/Select.spec.js +++ b/packages/main/test/specs/Select.spec.js @@ -32,6 +32,7 @@ describe("Select general interaction", () => { assert.strictEqual(await inputResult.getProperty("value"), "1", "Fired change event is called once."); const selectTextHtml = await selectText.getHTML(false); + assert.strictEqual(await select.getProperty("value"), EXPECTED_SELECTION_TEXT, "The 'value' property is correct."); assert.include(selectTextHtml, EXPECTED_SELECTION_TEXT, "Select label is correct."); }); @@ -47,6 +48,7 @@ describe("Select general interaction", () => { await secondItem.click(); const selectTextHtml = await selectText.getHTML(false); + assert.strictEqual(await select.getProperty("value"), EXPECTED_SELECTION_TEXT, "The 'value' property is correct."); assert.include(selectTextHtml, EXPECTED_SELECTION_TEXT, "Select label is not changed (reverted on third item)."); }); @@ -104,6 +106,7 @@ describe("Select general interaction", () => { assert.strictEqual(await inputResult.getProperty("value"), "1", "Fired change event is called once more."); let selectTextHtml = await selectText.getHTML(false); assert.include(selectTextHtml, EXPECTED_SELECTION_TEXT1, "Select label is correct."); + assert.strictEqual(await select.getProperty("value"), EXPECTED_SELECTION_TEXT1, "The 'value' property is correct."); await select.click(); await select.keys("ArrowDown"); @@ -112,7 +115,7 @@ describe("Select general interaction", () => { assert.strictEqual(await inputResult.getProperty("value"), "2", "Fired change event is called once more."); selectTextHtml = await selectText.getHTML(false); assert.include(selectTextHtml, EXPECTED_SELECTION_TEXT2, "Select label is correct."); - + assert.strictEqual(await select.getProperty("value"), EXPECTED_SELECTION_TEXT2, "The 'value' property is correct."); }); it("changes selection while closed with Arrow Up/Down", async () => { @@ -131,10 +134,12 @@ describe("Select general interaction", () => { await select.keys("ArrowUp"); let selectTextHtml = await selectText.getHTML(false); assert.include(selectTextHtml, EXPECTED_SELECTION_TEXT1, "Arrow Up should change selected item"); + assert.strictEqual(await select.getProperty("value"), EXPECTED_SELECTION_TEXT1, "The 'value' property is correct."); await select.keys("ArrowDown"); selectTextHtml = await selectText.getHTML(false); assert.include(selectTextHtml, EXPECTED_SELECTION_TEXT2, "Arrow Down should change selected item"); + assert.strictEqual(await select.getProperty("value"), EXPECTED_SELECTION_TEXT2, "The 'value' property is correct."); assert.strictEqual(await inputResult.getProperty("value"), "2", "Change event should have fired twice"); }); @@ -213,7 +218,7 @@ describe("Select general interaction", () => { const selectTextHtml = await selectText.getHTML(false); assert.include(selectTextHtml, EXPECTED_SELECTION_TEXT, "Arrow Up should change selected item"); - + const focusedElementId = await browser.executeAsync(done => { done(document.activeElement.id); }); @@ -573,5 +578,5 @@ describe("Attributes propagation", () => { assert.strictEqual(await firstOption.getProperty("additionalText"), EXPECTED_ADDITIONAL_TEXT, "The additional text is set"); assert.strictEqual(await firstItem.getProperty("additionalText"), EXPECTED_ADDITIONAL_TEXT, "The additional text is correct"); - }); + }); }); diff --git a/packages/main/test/specs/SelectMenu.spec.js b/packages/main/test/specs/SelectMenu.spec.js index 9e79a38b9392..0bafdfe90032 100644 --- a/packages/main/test/specs/SelectMenu.spec.js +++ b/packages/main/test/specs/SelectMenu.spec.js @@ -12,6 +12,7 @@ describe("Select Menu general interaction", () => { const selectTextHtml = await selectText.getHTML(false); assert.include(selectTextHtml, EXPECTED_SELECTION_TEXT, "Select label is correct."); + assert.strictEqual(await select.getProperty("value"), EXPECTED_SELECTION_TEXT, "The 'value' property is correct."); }); it("fires 'open' and 'close' events", async () => { @@ -41,10 +42,12 @@ describe("Select Menu general interaction", () => { await select.keys("ArrowDown"); let selectTextHtml = await selectText.getHTML(false); assert.include(selectTextHtml, EXPECTED_SELECTION_TEXT1, "Arrow Up should change selected item"); + assert.strictEqual(await select.getProperty("value"), EXPECTED_SELECTION_TEXT1, "The 'value' property is correct."); await select.keys("ArrowUp"); selectTextHtml = await selectText.getHTML(false); assert.include(selectTextHtml, EXPECTED_SELECTION_TEXT2, "Arrow Down should change selected item"); + assert.strictEqual(await select.getProperty("value"), EXPECTED_SELECTION_TEXT2, "The 'value' property is correct."); assert.strictEqual(await inpTestChange.getProperty("value"), "2", "Change event should have fired twice"); }); @@ -68,6 +71,7 @@ describe("Select Menu general interaction", () => { const selectTextHtml = await selectText.getHTML(false); assert.include(selectTextHtml, EXPECTED_SELECTION_TEXT, "Select label is correct."); + assert.strictEqual(await select.getProperty("value"), EXPECTED_SELECTION_TEXT, "The 'value' property is correct."); }); it("fires 'change' and 'live-change' on Arrow Down, Arrow Up", async () => { @@ -91,6 +95,7 @@ describe("Select Menu general interaction", () => { assert.strictEqual(await inpTestChange.getProperty("value"), "1", "Fired 'change' event once."); let selectTextHtml = await selectText.getHTML(false); assert.include(selectTextHtml, EXPECTED_SELECTION_TEXT1, "Select label is correct."); + assert.strictEqual(await select.getProperty("value"), EXPECTED_SELECTION_TEXT1, "The 'value' property is correct."); await select.click(); await select.keys("ArrowUp"); @@ -100,6 +105,7 @@ describe("Select Menu general interaction", () => { assert.strictEqual(await inpTestChange.getProperty("value"), "2", "Fired 'change' event once more."); selectTextHtml = await selectText.getHTML(false); assert.include(selectTextHtml, EXPECTED_SELECTION_TEXT2, "Select label is correct."); + assert.strictEqual(await select.getProperty("value"), EXPECTED_SELECTION_TEXT2, "The 'value' property is correct."); }); it("reverts value on ESC key", async () => { diff --git a/yarn.lock b/yarn.lock index 3f762386ae11..50135fc12dcb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5242,10 +5242,10 @@ chrome-launcher@^0.15.0: is-wsl "^2.2.0" lighthouse-logger "^1.0.0" -chromedriver@117.0.3: - version "117.0.3" - resolved "https://registry.yarnpkg.com/chromedriver/-/chromedriver-117.0.3.tgz#4a14cc992d572367b99b53c772adcc4c19078e1e" - integrity sha512-c2rk2eGK5zZFBJMdviUlAJfQEBuPNIKfal4+rTFVYAmrWbMPYAqPozB+rIkc1lDP/Ryw44lPiqKglrI01ILhTQ== +chromedriver@119.0.0: + version "119.0.0" + resolved "https://registry.yarnpkg.com/chromedriver/-/chromedriver-119.0.0.tgz#f250c442e72266f3e28d2b1eebc6a671a8629340" + integrity sha512-3TmabGT7xg57/Jbsg6B/Kqk3HaSbCP1ZHkR5zNft5vT/IWKjZCAGTH9waMI+i5KHSEiMH0zOw/WF98l+1Npkpw== dependencies: "@testim/chrome-version" "^1.1.3" axios "^1.4.0" From da64938190141b0bb8c8e4ffb9dc40fa8fb97e8c Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Wed, 15 Nov 2023 23:35:54 +0200 Subject: [PATCH 2/9] chore: progress --- packages/main/src/Select.ts | 16 +++++++++++++--- packages/main/src/SelectMenu.hbs | 2 +- packages/main/src/SelectMenu.ts | 8 +++----- packages/main/test/pages/SelectMenu.html | 24 ++++++++++++------------ 4 files changed, 29 insertions(+), 21 deletions(-) diff --git a/packages/main/src/Select.ts b/packages/main/src/Select.ts index a7f6f469b029..11fc54894b15 100644 --- a/packages/main/src/Select.ts +++ b/packages/main/src/Select.ts @@ -504,7 +504,18 @@ class Select extends UI5Element implements IFormElement { return staticAreaItem!.querySelector("[ui5-responsive-popover]")!; } - get value() { + /** + * Returns the "value" of the component - either the value property of the selected option, or the text of the selected option. + * + * @public + * @type { string } + * @defaultvalue "" + * @name sap.ui.webc.main.Select.prototype.value + * @since 1.20.0 + * @formProperty + * @formEvents change liveChange + */ + get value(): string { return this.selectedOption?.value || this.selectedOption?.textContent || ""; } @@ -615,8 +626,7 @@ class Select extends UI5Element implements IFormElement { firstEnabledOptionIndex = -1; const options = this._filteredItems; const syncOpts = options.map((opt, index) => { - if (opt.selected || opt.textContent === this.value) { - // The second condition in the IF statement is added because of Angular Reactive Forms Support(Two way data binding) + if (opt.selected) { lastSelectedOptionIndex = index; } if (firstEnabledOptionIndex === -1) { diff --git a/packages/main/src/SelectMenu.hbs b/packages/main/src/SelectMenu.hbs index bc08ff919a67..6d6e83b9ef3f 100644 --- a/packages/main/src/SelectMenu.hbs +++ b/packages/main/src/SelectMenu.hbs @@ -30,7 +30,7 @@ {{/if}} {{#unless _isPhone}} {{#if hasValueState}} -
+
{{> valueStateMessage}}
diff --git a/packages/main/src/SelectMenu.ts b/packages/main/src/SelectMenu.ts index ab0309545d54..4e32243adbc6 100644 --- a/packages/main/src/SelectMenu.ts +++ b/packages/main/src/SelectMenu.ts @@ -135,7 +135,7 @@ class SelectMenu extends UI5Element { @property() valueStateText!: string; - @property() + @property({ type: String, noAttribute: true }) value!: string; valueStateMessageText: Array; @@ -178,8 +178,7 @@ class SelectMenu extends UI5Element { selectedIndex; const options = this.options; options.forEach((opt, index) => { - if (opt.selected || opt.textContent === this.value) { - // The second condition in the IF statement is added because of Angular Reactive Forms Support(Two way data binding) + if (opt.selected) { lastSelectedOptionIndex = index; } if (firstEnabledOptionIndex === -1) { @@ -266,8 +265,7 @@ class SelectMenu extends UI5Element { get styles() { return { - responsivePopoverHeader: { - "display": this.options.length && this.respPopover?.offsetWidth === 0 ? "none" : "inline-block", + valueStatePopover: { "width": `${this.selectWidth!}px`, }, responsivePopover: { diff --git a/packages/main/test/pages/SelectMenu.html b/packages/main/test/pages/SelectMenu.html index af029af7e483..1fd1c9fd4bd9 100644 --- a/packages/main/test/pages/SelectMenu.html +++ b/packages/main/test/pages/SelectMenu.html @@ -23,23 +23,23 @@
Select + SelectMenu + SelectMenuOption
- +
Information message. This is a Link. Extra long text used as an information message. Extra long text used as an information message - 2. Extra long text used as an information message - 3.
 - +
-
+ -
+
- + @@ -140,7 +140,7 @@ - + From 36e6dd4e07021cb60c5acbae6b99f156496c8d87 Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Thu, 16 Nov 2023 11:16:47 +0200 Subject: [PATCH 3/9] chore: remove comments --- packages/main/test/pages/SelectMenu.html | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/main/test/pages/SelectMenu.html b/packages/main/test/pages/SelectMenu.html index 1fd1c9fd4bd9..bde195a52a26 100644 --- a/packages/main/test/pages/SelectMenu.html +++ b/packages/main/test/pages/SelectMenu.html @@ -23,23 +23,23 @@
Select + SelectMenu + SelectMenuOption
- +
Information message. This is a Link. Extra long text used as an information message. Extra long text used as an information message - 2. Extra long text used as an information message - 3.
 - +
- +
- + - + @@ -140,7 +140,7 @@ - + From 1bd3893f339940864c42285c2dd6758cd5488104 Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Thu, 16 Nov 2023 11:43:02 +0200 Subject: [PATCH 4/9] chore: revert yarn.lock --- packages/main/src/Select.ts | 1 - yarn.lock | 8 ++++---- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/main/src/Select.ts b/packages/main/src/Select.ts index 11fc54894b15..68f594148892 100644 --- a/packages/main/src/Select.ts +++ b/packages/main/src/Select.ts @@ -358,7 +358,6 @@ class Select extends UI5Element implements IFormElement { responsivePopover!: ResponsivePopover; selectedItem?: string | null; valueStatePopover?: Popover; - // value!: string; selectMenu?: SelectMenu; diff --git a/yarn.lock b/yarn.lock index 50135fc12dcb..3f762386ae11 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5242,10 +5242,10 @@ chrome-launcher@^0.15.0: is-wsl "^2.2.0" lighthouse-logger "^1.0.0" -chromedriver@119.0.0: - version "119.0.0" - resolved "https://registry.yarnpkg.com/chromedriver/-/chromedriver-119.0.0.tgz#f250c442e72266f3e28d2b1eebc6a671a8629340" - integrity sha512-3TmabGT7xg57/Jbsg6B/Kqk3HaSbCP1ZHkR5zNft5vT/IWKjZCAGTH9waMI+i5KHSEiMH0zOw/WF98l+1Npkpw== +chromedriver@117.0.3: + version "117.0.3" + resolved "https://registry.yarnpkg.com/chromedriver/-/chromedriver-117.0.3.tgz#4a14cc992d572367b99b53c772adcc4c19078e1e" + integrity sha512-c2rk2eGK5zZFBJMdviUlAJfQEBuPNIKfal4+rTFVYAmrWbMPYAqPozB+rIkc1lDP/Ryw44lPiqKglrI01ILhTQ== dependencies: "@testim/chrome-version" "^1.1.3" axios "^1.4.0" From 9746f695008190308fdf126f43a7418e5766e878 Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Sat, 18 Nov 2023 00:09:43 +0200 Subject: [PATCH 5/9] chore: update --- packages/main/src/Select.ts | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/main/src/Select.ts b/packages/main/src/Select.ts index 68f594148892..4b0d481a7233 100644 --- a/packages/main/src/Select.ts +++ b/packages/main/src/Select.ts @@ -504,7 +504,7 @@ class Select extends UI5Element implements IFormElement { } /** - * Returns the "value" of the component - either the value property of the selected option, or the text of the selected option. + * Returns the value of the component - the value property of the selected option or its text content. * * @public * @type { string } @@ -518,6 +518,17 @@ class Select extends UI5Element implements IFormElement { return this.selectedOption?.value || this.selectedOption?.textContent || ""; } + /** + * Defines the value of the component - the option with matching value property or text content will be selected. + * + * @public + * @type { string } + * @defaultvalue "" + * @name sap.ui.webc.main.Select.prototype.value + * @since 1.20.0 + * @formProperty + * @formEvents change liveChange + */ set value(newValue: string) { const option = this.getOptionByValue(newValue); const prevSelectedOption = this.selectedOption; From e271481093ac75e117ebdcecaf95cde6a3355a29 Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Sat, 18 Nov 2023 16:52:15 +0200 Subject: [PATCH 6/9] chore: update --- packages/main/src/Select.ts | 7 ++++-- packages/main/test/pages/FormSupport.html | 5 +++++ packages/main/test/pages/Select.html | 19 +++++++++++++++++ packages/main/test/pages/SelectMenu.html | 7 ++++++ packages/main/test/specs/Select.spec.js | 26 +++++++++++++++++++++++ 5 files changed, 62 insertions(+), 2 deletions(-) diff --git a/packages/main/src/Select.ts b/packages/main/src/Select.ts index 93423c6c6e69..704a0dc2f60c 100644 --- a/packages/main/src/Select.ts +++ b/packages/main/src/Select.ts @@ -520,6 +520,9 @@ class Select extends UI5Element implements IFormElement { /** * Defines the value of the component - the option with matching value property or text content will be selected. + *
+ * Note: If the given value does not matches any existing option, + * the first option will get selected and its value will become the Select's value. * * @public * @type { string } @@ -530,7 +533,7 @@ class Select extends UI5Element implements IFormElement { * @formEvents change liveChange */ set value(newValue: string) { - this._filteredItems.forEach(option => { + this.selectOptions.forEach(option => { option.selected = !!((option.value || option.textContent) === newValue); }); } @@ -704,7 +707,7 @@ class Select extends UI5Element implements IFormElement { formSupport.syncNativeHiddenInput(this, (element: IFormElement, nativeInput: NativeFormElement) => { const selectElement = (element as Select); nativeInput.disabled = !!element.disabled; - nativeInput.value = selectElement._currentlySelectedOption ? selectElement._currentlySelectedOption.value : ""; + nativeInput.value = selectElement.value; }); } else if (this.name) { console.warn(`In order for the "name" property to have effect, you should also: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";`); // eslint-disable-line diff --git a/packages/main/test/pages/FormSupport.html b/packages/main/test/pages/FormSupport.html index 709c71f51cac..e7eb335991f2 100644 --- a/packages/main/test/pages/FormSupport.html +++ b/packages/main/test/pages/FormSupport.html @@ -17,6 +17,11 @@
+ + Cozy + Compact + Condensed +

diff --git a/packages/main/test/pages/Select.html b/packages/main/test/pages/Select.html index cb4e180cc6ca..a1a123328f87 100644 --- a/packages/main/test/pages/Select.html +++ b/packages/main/test/pages/Select.html @@ -152,6 +152,18 @@

Select with additional text

Australia + +
+

Select "value" property

+ + Item1 + Item2 + Item3 + + select.value = "Item2" + select.value = "NAN" +
+ diff --git a/packages/main/test/pages/SelectMenu.html b/packages/main/test/pages/SelectMenu.html index bde195a52a26..7b9b267f9efc 100644 --- a/packages/main/test/pages/SelectMenu.html +++ b/packages/main/test/pages/SelectMenu.html @@ -18,6 +18,7 @@


+
@@ -53,6 +54,7 @@ Reset counters Focus out select.value = "item1" + select.value = "nan"
@@ -618,10 +620,12 @@ sel.addEventListener("ui5-change", function(e) { lbl.innerHTML = "CHANGE EVENT :: " + e.detail.selectedOption.localName + " :: <" + e.detail.selectedOption.textContent + "> :: event counter :: <" + (++counter) + ">"; + lblValue.innerHTML = "Select value :: " + sel.value; }); sel.addEventListener("ui5-live-change", function(e) { lblLive.innerHTML = "PREVIEW CHANGE EVENT :: " + e.detail.selectedOption.localName + " :: <" + e.detail.selectedOption.textContent + "> :: event counter :: <" + (++liveCounter) + ">"; + lblValue.innerHTML = "Select value :: " + sel.value; mainText.innerHTML = e.detail.selectedOption.getAttribute("data-display-text") avatar.initials = e.detail.selectedOption.getAttribute("data-additional-text"); }); @@ -668,5 +672,8 @@ btnSetValue.addEventListener("click", function(e) { selTest.value = "item1"; }); + btnSetInvalidValue.addEventListener("click", function(e) { + selTest.value = "nan"; + }); diff --git a/packages/main/test/specs/Select.spec.js b/packages/main/test/specs/Select.spec.js index 42e845dde870..b19a97cd1513 100644 --- a/packages/main/test/specs/Select.spec.js +++ b/packages/main/test/specs/Select.spec.js @@ -312,6 +312,32 @@ describe("Select general interaction", () => { assert.include(selectTextHtml, EXPECTED_SELECTION_TEXT, "Typing text should change selection"); }); + it("changes selection using 'value'", async () => { + const select = await browser.$("#mySelect7"); + const btnSetValue = await browser.$("#btnSetValue"); + const btnSetInvalidValue = await browser.$("#btnSetInvalidValue"); + const selectText = await select.shadow$(".ui5-select-label-root"); + const EXPECTED_SELECTION_TEXT1 = "Item1"; + const EXPECTED_SELECTION_TEXT2 = "Item2"; + + + await btnSetValue.click(); + let selectTextHtml = await selectText.getHTML(false); + + assert.strictEqual(await select.getProperty("value"), + EXPECTED_SELECTION_TEXT2, "Second option is selected."); + assert.include(selectTextHtml, EXPECTED_SELECTION_TEXT2, + "Select label is " + EXPECTED_SELECTION_TEXT2); + + await btnSetInvalidValue.click(); + selectTextHtml = await selectText.getHTML(false); + + assert.strictEqual(await select.getProperty("value"), + EXPECTED_SELECTION_TEXT1, "First option is selected as value did not match any options."); + assert.include(selectTextHtml, EXPECTED_SELECTION_TEXT1, + "Select label is " + EXPECTED_SELECTION_TEXT1); + }); + it("opens upon space", async () => { await browser.url(`test/pages/Select.html`); From 5b4177b2895a06859e4b2cd70478ac905a75ab50 Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Sun, 26 Nov 2023 17:17:08 +0200 Subject: [PATCH 7/9] chore: invlaidate SelectMenu when used by another Select --- packages/main/src/Select.ts | 3 +++ packages/main/src/SelectMenu.ts | 3 +++ 2 files changed, 6 insertions(+) diff --git a/packages/main/src/Select.ts b/packages/main/src/Select.ts index 704a0dc2f60c..1c097fb6cd6b 100644 --- a/packages/main/src/Select.ts +++ b/packages/main/src/Select.ts @@ -459,6 +459,9 @@ class Select extends UI5Element implements IFormElement { if (menu) { menu.value = this.value; + // To cause invalidation when the menu is used for another Select that could have the same value as the previous. + // Otherwise, the menu won't re-render. + menu.selectId = this.__id; } else { this._syncSelection(); } diff --git a/packages/main/src/SelectMenu.ts b/packages/main/src/SelectMenu.ts index 4e32243adbc6..bfedae0b3976 100644 --- a/packages/main/src/SelectMenu.ts +++ b/packages/main/src/SelectMenu.ts @@ -138,6 +138,9 @@ class SelectMenu extends UI5Element { @property({ type: String, noAttribute: true }) value!: string; + @property({ type: String, noAttribute: true }) + selectId?: string; + valueStateMessageText: Array; _headerTitleText?: string; From 18c9807023ce4bed5703564663091f08d7017e8d Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Sun, 26 Nov 2023 17:57:54 +0200 Subject: [PATCH 8/9] chore: update FormSupport test --- packages/main/test/specs/FormSupport.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/main/test/specs/FormSupport.spec.js b/packages/main/test/specs/FormSupport.spec.js index 5e1b1445e090..7a5ab95c3f50 100644 --- a/packages/main/test/specs/FormSupport.spec.js +++ b/packages/main/test/specs/FormSupport.spec.js @@ -28,7 +28,7 @@ describe("Form support", () => { await submitButton.click(); const formWasSubmitted = await browser.executeAsync(done => { - const expectedFormData = "?input=ok&ta=ok%0D%0Aok&dp=Apr+10%2C+2019&cb=on&radio=b&si=5"; + const expectedFormData = "?input=ok&sel=condensed&ta=ok%0D%0Aok&dp=Apr+10%2C+2019&cb=on&radio=b&si=5"; done(location.href.endsWith(expectedFormData)); }); assert.ok(formWasSubmitted, "For was submitted and URL changed"); From e67d5b223e23bb8e315fe20a8928af065d072e84 Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Sun, 26 Nov 2023 18:11:02 +0200 Subject: [PATCH 9/9] chore: update jsdoc --- packages/main/src/Select.ts | 29 +++++++++++------------------ 1 file changed, 11 insertions(+), 18 deletions(-) diff --git a/packages/main/src/Select.ts b/packages/main/src/Select.ts index 1c097fb6cd6b..4e257d76ad96 100644 --- a/packages/main/src/Select.ts +++ b/packages/main/src/Select.ts @@ -507,25 +507,14 @@ class Select extends UI5Element implements IFormElement { } /** - * Returns the value of the component - the value property of the selected option or its text content. - * - * @public - * @type { string } - * @defaultvalue "" - * @name sap.ui.webc.main.Select.prototype.value - * @since 1.20.0 - * @formProperty - * @formEvents change liveChange - */ - get value(): string { - return this.selectedOption?.value || this.selectedOption?.textContent || ""; - } - - /** - * Defines the value of the component - the option with matching value property or text content will be selected. + * Defines the value of the component: + *
+ * - when get - returns the value of the component, e.g. the value property of the selected option or its text content. *
- * Note: If the given value does not matches any existing option, - * the first option will get selected and its value will become the Select's value. + * - when set - selects the option with matching value property or text content. + *

+ * Note: If the given value does not match any existing option, + * the first option will get selected. * * @public * @type { string } @@ -541,6 +530,10 @@ class Select extends UI5Element implements IFormElement { }); } + get value(): string { + return this.selectedOption?.value || this.selectedOption?.textContent || ""; + } + /** * Currently selected ui5-option element. * @readonly