Skip to content

feat(ui5-toolbar-select): add value prop to ToolbarSelectOption and selectedToolbarOption in change event #13804

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
NakataCode wants to merge 4 commits into
base: main
Choose a base branch
from
+258 −6
Open

feat(ui5-toolbar-select): add value prop to ToolbarSelectOption and selectedToolbarOption in change event #13804

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e0de80f
feat(ui5-toolbar-select): add value prop to ToolbarSelectOption and s…
NakataCode Jul 9, 2026
dc57c95
chore: add more tests
NakataCode Jul 14, 2026
81dd566
Merge branch 'main' into toolbar-select-option-value
PetyaMarkovaBogdanova Jul 16, 2026
b394055
fix(ui5-toolbar-select): fix type, @since, and empty-value bugs in se…
NakataCode Jul 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
237 changes: 237 additions & 0 deletions packages/main/cypress/specs/ToolbarSelect.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,243 @@ describe("Toolbar general interaction", () => {
.should("have.attr", "accessible-name-ref", "title");
});

it("Should expose value and selectedToolbarOption in change event detail", () => {
cy.mount(
<>
<Toolbar>
<ToolbarSelect id="ts">
<ToolbarSelectOption value="opt1">Option 1</ToolbarSelectOption>
<ToolbarSelectOption value="opt2" selected>Option 2</ToolbarSelectOption>
<ToolbarSelectOption value="opt3">Option 3</ToolbarSelectOption>
</ToolbarSelect>
</Toolbar>
<input data-testid="result-value" />
<input data-testid="result-toolbar-option" />
</>
);

cy.get("[ui5-toolbar-select]").then($select => {
$select.get(0).addEventListener("ui5-change", (e: Event) => {
const ce = e as CustomEvent;
(document.querySelector("[data-testid='result-value']") as HTMLInputElement).value = ce.detail.selectedOption.value;
(document.querySelector("[data-testid='result-toolbar-option']") as HTMLInputElement).value = ce.detail.selectedToolbarOption.value;
});
});

cy.get("[ui5-toolbar]")
.find("[ui5-toolbar-select]")
.shadow()
.find("[ui5-select]")
.realClick();

cy.get("[ui5-toolbar]")
.find("[ui5-toolbar-select]")
.shadow()
.find("[ui5-select]")
.realPress("ArrowUp");

cy.get("[ui5-toolbar]")
.find("[ui5-toolbar-select]")
.shadow()
.find("[ui5-select]")
.realPress("Enter");

cy.get("[data-testid='result-value']").should("have.prop", "value", "opt1");
cy.get("[data-testid='result-toolbar-option']").should("have.prop", "value", "opt1");
});

it("Should expose selectedToolbarOption as the actual element reference with correct id and value", () => {
cy.mount(
<>
<Toolbar>
<ToolbarSelect id="ts-verify-sync">
<ToolbarSelectOption id="opt-1" value="value1">First</ToolbarSelectOption>
<ToolbarSelectOption id="opt-2" value="value2" selected>Second</ToolbarSelectOption>
<ToolbarSelectOption id="opt-3" value="value3">Third</ToolbarSelectOption>
</ToolbarSelect>
</Toolbar>
<div data-testid="selected-element-id"></div>
</>
);

cy.get("[ui5-toolbar-select]").then($select => {
$select.get(0).addEventListener("ui5-change", (e: Event) => {
const ce = e as CustomEvent;
const selectedToolbarOption = ce.detail.selectedToolbarOption as HTMLElement;
const testDiv = document.querySelector("[data-testid='selected-element-id']") as HTMLElement;
testDiv.setAttribute("data-selected-id", selectedToolbarOption.id);
testDiv.setAttribute("data-selected-value", (selectedToolbarOption as any).value || "");
});
});

cy.get("[ui5-toolbar]")
.find("[ui5-toolbar-select]")
.shadow()
.find("[ui5-select]")
.realClick();

cy.get("[ui5-toolbar]")
.find("[ui5-toolbar-select]")
.shadow()
.find("[ui5-select]")
.realPress("ArrowDown");

cy.get("[ui5-toolbar]")
.find("[ui5-toolbar-select]")
.shadow()
.find("[ui5-select]")
.realPress("Enter");

cy.get("[data-testid='selected-element-id']")
.should("have.attr", "data-selected-id", "opt-3")
.should("have.attr", "data-selected-value", "value3");
});

it("Should correctly identify selectedToolbarOption when option text does not match value", () => {
cy.mount(
<>
<Toolbar>
<ToolbarSelect id="ts-mismatch">
<ToolbarSelectOption value="internal_1">Display Text 1</ToolbarSelectOption>
<ToolbarSelectOption value="internal_2" selected>Display Text 2</ToolbarSelectOption>
<ToolbarSelectOption value="internal_3">Display Text 3</ToolbarSelectOption>
</ToolbarSelect>
</Toolbar>
<input data-testid="value-match-test" />
<input data-testid="text-match-test" />
</>
);

cy.get("[ui5-toolbar-select]").then($select => {
$select.get(0).addEventListener("ui5-change", (e: Event) => {
const ce = e as CustomEvent;
const selectedToolbarOption = ce.detail.selectedToolbarOption as any;
(document.querySelector("[data-testid='value-match-test']") as HTMLInputElement).value = selectedToolbarOption.value || "";
(document.querySelector("[data-testid='text-match-test']") as HTMLInputElement).value = selectedToolbarOption.textContent?.trim() || "";
});
});

cy.get("[ui5-toolbar]")
.find("[ui5-toolbar-select]")
.shadow()
.find("[ui5-select]")
.realClick();

cy.get("[ui5-toolbar]")
.find("[ui5-toolbar-select]")
.shadow()
.find("[ui5-select]")
.realPress("ArrowDown");

cy.get("[ui5-toolbar]")
.find("[ui5-toolbar-select]")
.shadow()
.find("[ui5-select]")
.realPress("Enter");

cy.get("[data-testid='value-match-test']").should("have.prop", "value", "internal_3");
cy.get("[data-testid='text-match-test']").should("have.prop", "value", "Display Text 3");
});

it("Should expose correct selectedToolbarOption for duplicate text options", () => {
cy.mount(
<>
<Toolbar>
<ToolbarSelect id="ts-dup">
<ToolbarSelectOption value="pending-normal">Pending</ToolbarSelectOption>
<ToolbarSelectOption value="active" selected>Active</ToolbarSelectOption>
<ToolbarSelectOption value="pending-urgent">Pending</ToolbarSelectOption>
</ToolbarSelect>
</Toolbar>
<input data-testid="dup-result-value" />
</>
);

cy.get("[ui5-toolbar-select]").then($select => {
$select.get(0).addEventListener("ui5-change", (e: Event) => {
const ce = e as CustomEvent;
(document.querySelector("[data-testid='dup-result-value']") as HTMLInputElement).value = ce.detail.selectedToolbarOption.value;
});
});

cy.get("[ui5-toolbar]")
.find("[ui5-toolbar-select]")
.shadow()
.find("[ui5-select]")
.realClick();

cy.get("[ui5-toolbar]")
.find("[ui5-toolbar-select]")
.shadow()
.find("[ui5-select]")
.realPress("ArrowDown");

cy.get("[ui5-toolbar]")
.find("[ui5-toolbar-select]")
.shadow()
.find("[ui5-select]")
.realPress("ArrowDown");

cy.get("[ui5-toolbar]")
.find("[ui5-toolbar-select]")
.shadow()
.find("[ui5-select]")
.realPress("Enter");

cy.get("[data-testid='dup-result-value']").should("have.prop", "value", "pending-urgent");
});

it("Should work correctly when options have no value property set", () => {
cy.mount(
<>
<Toolbar>
<ToolbarSelect>
<ToolbarSelectOption selected>Option A</ToolbarSelectOption>
<ToolbarSelectOption>Option B</ToolbarSelectOption>
<ToolbarSelectOption>Option C</ToolbarSelectOption>
</ToolbarSelect>
</Toolbar>
<input data-testid="no-value-result" />
</>
);

cy.get("[ui5-toolbar-select]").then($select => {
$select.get(0).addEventListener("ui5-change", (e: Event) => {
const ce = e as CustomEvent;
(document.querySelector("[data-testid='no-value-result']") as HTMLInputElement).value = ce.detail.selectedToolbarOption.textContent?.trim() ?? "";
});
});

cy.get("[ui5-toolbar]")
.find("[ui5-toolbar-select]")
.shadow()
.find("[ui5-select]")
.realClick();

cy.get("[ui5-toolbar]")
.find("[ui5-toolbar-select]")
.shadow()
.find("[ui5-select]")
.realPress("ArrowDown");

cy.get("[ui5-toolbar]")
.find("[ui5-toolbar-select]")
.shadow()
.find("[ui5-select]")
.realPress("Enter");

cy.get("[data-testid='no-value-result']").should("have.prop", "value", "Option B");

// Verify the internal select still shows the correct option selected
cy.get("[ui5-toolbar]")
.find("[ui5-toolbar-select]")
.shadow()
.find("[ui5-select]")
.find("[ui5-option]")
.eq(1)
.should("have.attr", "selected");
});

it("Should fire change event on selection change", () => {
cy.mount(
<>
Expand Down
15 changes: 10 additions & 5 deletions packages/main/src/ToolbarSelect.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,9 @@ import type ToolbarSelectOption from "./ToolbarSelectOption.js";
import type { SelectChangeEventDetail } from "./Select.js";
import type { DefaultSlot, Slot } from "@ui5/webcomponents-base/dist/UI5Element.js";

type ToolbarSelectChangeEventDetail = ToolbarItemEventDetail & SelectChangeEventDetail;
type ToolbarSelectChangeEventDetail = ToolbarItemEventDetail & SelectChangeEventDetail & {
selectedToolbarOption: ToolbarSelectOption | undefined;
};

/**
* @class
Expand Down Expand Up @@ -44,6 +46,8 @@ type ToolbarSelectChangeEventDetail = ToolbarItemEventDetail & SelectChangeEvent
/**
* Fired when the selected option changes.
* @param {HTMLElement} selectedOption the selected option.
* @param {HTMLElement} selectedToolbarOption the original toolbar select option.
* @since 2.25.0
* @public
*/
@event("change", {
Expand Down Expand Up @@ -193,16 +197,17 @@ class ToolbarSelect extends ToolbarItemBase {

onChange(e: CustomEvent<SelectChangeEventDetail>): void {
e.stopImmediatePropagation();
const prevented = !this.fireDecoratorEvent("change", { ...e.detail, targetRef: e.target as HTMLElement });
const selectedOptionIndex = Number(e.detail.selectedOption?.getAttribute("data-ui5-external-action-item-index"));
const selectedToolbarOption = this.options[selectedOptionIndex];
const prevented = !this.fireDecoratorEvent("change", { ...e.detail, targetRef: e.target as HTMLElement, selectedToolbarOption });
if (!prevented) {
this.fireDecoratorEvent("close-overflow");
}

this._syncOptions(e.detail.selectedOption);
this._syncOptions(selectedOptionIndex);
}

_syncOptions(selectedOption: HTMLElement): void {
const selectedOptionIndex = Number(selectedOption?.getAttribute("data-ui5-external-action-item-index"));
_syncOptions(selectedOptionIndex: number): void {
this.options.forEach((option: ToolbarSelectOption, index: number) => {
option.selected = index === selectedOptionIndex;
});
Expand Down
11 changes: 10 additions & 1 deletion packages/main/src/ToolbarSelectOption.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,15 @@ import type ToolbarSelect from "./ToolbarSelect.js";
*/
@customElement("ui5-toolbar-select-option")
class ToolbarSelectOption extends UI5Element {
/**
* Defines the value of the component.
* @default undefined
* @public
* @since 2.25.0
*/
@property()
value?: string;

/**
* Defines the selected state of the component.
* @default false
Expand Down Expand Up @@ -47,7 +56,7 @@ class ToolbarSelectOption extends UI5Element {
}
});
if (parent.select) {
parent.select.value = this.textContent || "";
parent.select.value = this.value !== undefined && this.value !== "" ? this.value : (this.textContent || "");
}
}
}
Expand Down
1 change: 1 addition & 0 deletions packages/main/src/ToolbarSelectTemplate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ export default function ToolbarSelectTemplate(this: ToolbarSelect) {
{this.options.map((option, index) => (
<Option
selected={option.selected}
value={option.value}
data-ui5-external-action-item-index={index}
>
{option.textContent}
Expand Down
Loading