Skip to content

fix(ui5-toolbar-select): add invalidateOnChildChange #12676

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
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

fix(ui5-toolbar-select): add invalidateOnChildChange #12676

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
620759f
fix(ui5-toolbar-select): sync value when option selected property cha…
NakataCode Nov 14, 2025
3354e31
refactor: leave only invalidateOnChildChange to update the options
NakataCode Nov 27, 2025
af22c35
Merge branch 'main' into toolbar-select-option
NakataCode Nov 27, 2025
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
70 changes: 66 additions & 4 deletions packages/main/cypress/specs/ToolbarSelect.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import Toolbar from "../../src/Toolbar.js";
import ToolbarSelect from "../../src/ToolbarSelect.js";
import ToolbarSelectOption from "../../src/ToolbarSelectOption.js";
import Button from "../../src/Button.js";

describe("Toolbar general interaction", () => {
it("Should render the select with the correct attributes", () => {
Expand Down Expand Up @@ -264,10 +265,10 @@ describe("Toolbar general interaction", () => {
cy.mount(
<Toolbar id="otb_d">
<ToolbarSelect style="width: 201px;" id="toolbar-select">
<ToolbarSelectOption>1</ToolbarSelectOption>
<ToolbarSelectOption selected>2</ToolbarSelectOption>
<ToolbarSelectOption>3</ToolbarSelectOption>
</ToolbarSelect>
<ToolbarSelectOption>1</ToolbarSelectOption>
<ToolbarSelectOption selected>2</ToolbarSelectOption>
<ToolbarSelectOption>3</ToolbarSelectOption>
</ToolbarSelect>
</Toolbar>
);
cy.viewport(220, 1080); // Set a small viewport width to trigger overflow
Expand All @@ -282,4 +283,65 @@ describe("Toolbar general interaction", () => {
// Verify the toolbar-select is rendered inside the popover
cy.get("ui5-toolbar-select").should("be.visible");
});

it("Should update selection when option's selected property is changed programmatically", () => {
cy.mount(
<>
<Toolbar>
<ToolbarSelect>
<ToolbarSelectOption>1</ToolbarSelectOption>
<ToolbarSelectOption id="opt2">2</ToolbarSelectOption>
<ToolbarSelectOption>3</ToolbarSelectOption>
<ToolbarSelectOption>4</ToolbarSelectOption>
</ToolbarSelect>
</Toolbar>
<Button id="btn">select option 2</Button>
</>
);

// Set up button click handler
cy.get("#btn").then($btn => {
$btn.get(0).addEventListener("ui5-click", () => {
// First, deselect all options
const select = document.querySelector("ui5-toolbar-select");
const options = select?.querySelectorAll("ui5-toolbar-select-option");
options?.forEach(opt => {
(opt as ToolbarSelectOption).selected = false;
});
// Then select option 2
const opt2 = document.getElementById("opt2") as ToolbarSelectOption;
opt2.selected = true;
});
});

// Verify initial state - first option has selected attribute
cy.get("[ui5-toolbar]")
.find("[ui5-toolbar-select]")
.shadow()
.find("[ui5-select]")
.find("[ui5-option]")
.eq(0)
.should("have.attr", "selected");

// Click button using realClick
cy.get("#btn").realClick();

// Verify option 2 now has the selected attribute
cy.get("[ui5-toolbar]")
.find("[ui5-toolbar-select]")
.shadow()
.find("[ui5-select]")
.find("[ui5-option]")
.eq(1)
.should("have.attr", "selected");

// Verify option 1 no longer has selected attribute
cy.get("[ui5-toolbar]")
.find("[ui5-toolbar-select]")
.shadow()
.find("[ui5-select]")
.find("[ui5-option]")
.eq(0)
.should("not.have.attr", "selected");
});
});
1 change: 1 addition & 0 deletions packages/main/src/ToolbarSelect.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,7 @@ class ToolbarSelect extends ToolbarItem {
@slot({
"default": true,
type: HTMLElement,
invalidateOnChildChange: true,
})
options!: Array<ToolbarSelectOption>;

Expand Down
Loading