Skip to content

fix(ui5-tokenizer): correct focus behavior on backspace #13221

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

Merged
ivoplashkov merged 4 commits into from
Mar 9, 2026
+78 −52
Merged

fix(ui5-tokenizer): correct focus behavior on backspace #13221

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
95474f6
fix(ui5-tokenizer): correct focus behavior on backspace
ivoplashkov Mar 9, 2026
c2c0737
fix(ui5-tokenizer): fix test
ivoplashkov Mar 9, 2026
a973543
fix(ui5-tokenizer): correct test
ivoplashkov Mar 9, 2026
7365f68
Merge branch 'main' into tokenizer-backspace-focus-issue
ivoplashkov Mar 9, 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
127 changes: 76 additions & 51 deletions packages/main/cypress/specs/Tokenizer.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ describe("General Interaction", () => {
describe("Tokenizer nMore Popover", () => {
it("tests opening of nMore Popover", () => {
cy.mount(
<div style={{display: "flex", flexDirection: "column", width: "240px"}}>
<div style={{ display: "flex", flexDirection: "column", width: "240px" }}>
<Tokenizer id="nmore-tokenizer">
<Token text="Andora"></Token>
<Token text="Bulgaria"></Token>
Expand Down Expand Up @@ -102,7 +102,7 @@ describe("Tokenizer nMore Popover", () => {

it("tests F7 list item navigation", () => {
cy.mount(
<div style={{display: "flex", flexDirection: "column", width: "240px"}}>
<div style={{ display: "flex", flexDirection: "column", width: "240px" }}>
<Tokenizer id="nmore-tokenizer">
<Token text="Andora"></Token>
<Token text="Bulgaria"></Token>
Expand Down Expand Up @@ -190,7 +190,7 @@ describe("Tokenizer nMore Popover", () => {

it("tests item deletion via keyboard", () => {
cy.mount(
<div style={{display: "flex", flexDirection: "column", width: "240px"}}>
<div style={{ display: "flex", flexDirection: "column", width: "240px" }}>
<Tokenizer id="nmore-tokenizer">
<Token text="Andora"></Token>
<Token text="Bulgaria"></Token>
Expand Down Expand Up @@ -350,7 +350,7 @@ describe("Readonly", () => {

it("tests expanding of tokenizer + focus handling in readonly mode.", () => {
cy.mount(
<div style={{display: "flex", flexDirection: "column", width: "240px"}}>
<div style={{ display: "flex", flexDirection: "column", width: "240px" }}>
<Tokenizer readonly onTokenDelete={onTokenDelete}>
<Token text="Andora" readonly></Token>
<Token text="Bulgaria" readonly></Token>
Expand Down Expand Up @@ -724,7 +724,7 @@ describe("Accessibility", () => {
.should("have.attr", "aria-disabled");
});

it("should test tokenizer content aria attributes", () => {
it("should test tokenizer content aria attributes", () => {
cy.mount(
<Tokenizer>
<Token text="Andora"></Token>
Expand Down Expand Up @@ -1324,6 +1324,31 @@ describe("Keyboard Handling", () => {
cy.get("[ui5-tokenizer]")
.find("[ui5-token]")
.should("have.length", 2);

cy.get("@firstToken")
.should("be.focused");
});

it("should focus previous token when deleting last token with [Backspace]", () => {
cy.get("[ui5-token]")
.eq(1)
.as("secondToken");

cy.get("[ui5-token]")
.eq(2)
.as("lastToken");

cy.get("@lastToken")
.realClick();

cy.realPress("Backspace");

cy.get("[ui5-tokenizer]")
.find("[ui5-token]")
.should("have.length", 2);

cy.get("@secondToken")
.should("be.focused");
});

it("should delete all selected tokens on [Backspace]", () => {
Expand Down Expand Up @@ -1802,46 +1827,46 @@ describe("Clipboard Operations", () => {
});

describe("Tokenizer - getFocusDomRef Method", () => {
it("should focus the last focused token on tokenizer focus if its visible", () => {
const onButtonClick = () => {
document.getElementById("tokenizer").focus();
}
cy.mount(
<>
it("should focus the last focused token on tokenizer focus if its visible", () => {
const onButtonClick = () => {
document.getElementById("tokenizer").focus();
}
cy.mount(
<>
<Tokenizer id="tokenizer">
<Token text="Andora"></Token>
<Token text="Bulgaria"></Token>
<Token text="Canada"></Token>
<Token text="Denmark"></Token>
</Tokenizer>
<Button>Dummy Btn</Button>
<Button onClick={onButtonClick}>Focus Tokenizer</Button>
</>
);

cy.get("[ui5-token]")
.eq(1)
.realClick();

cy.get("[ui5-button]")
.eq(0)
.realClick();

cy.get("[ui5-button]")
.eq(1)
.realClick();

cy.get("[ui5-token]")
.eq(1)
.should("be.focused");
});

it("should focus the first token if the previously focused token is not visible", () => {
const onButtonClick = () => {
document.getElementById("nmore-token").focus();
}
cy.mount(
<>
<Button>Dummy Btn</Button>
<Button onClick={onButtonClick}>Focus Tokenizer</Button>
</>
);

cy.get("[ui5-token]")
.eq(1)
.realClick();

cy.get("[ui5-button]")
.eq(0)
.realClick();

cy.get("[ui5-button]")
.eq(1)
.realClick();

cy.get("[ui5-token]")
.eq(1)
.should("be.focused");
});

it("should focus the first token if the previously focused token is not visible", () => {
const onButtonClick = () => {
document.getElementById("nmore-token").focus();
}
cy.mount(
<>
<div style={"width: 200px"}>
<Tokenizer id="nmore-token" style={"width: 200px"}>
<Token text="Andora"></Token>
Expand All @@ -1852,28 +1877,28 @@ describe("Tokenizer - getFocusDomRef Method", () => {
</Tokenizer>
</div>
<Button>Dummy Btn</Button>
<Button onClick={onButtonClick}>Focus Tokenizer</Button>
</>
);
<Button onClick={onButtonClick}>Focus Tokenizer</Button>
</>
);

cy.get("[ui5-button]")
cy.get("[ui5-button]")
.eq(1)
.realClick();
.realClick();

cy.get("[ui5-token]")
.eq(2)
.realClick();
cy.get("[ui5-token]")
.eq(2)
.realClick();

cy.get("[ui5-button]")
.eq(0)
.realClick();
.realClick();

cy.get("[ui5-button]")
.eq(1)
.realClick();
.realClick();

cy.get("[ui5-token]")
.eq(0)
.should("be.focused");
.eq(0)
.should("be.focused");
});
});
3 changes: 2 additions & 1 deletion packages/main/src/Tokenizer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -561,6 +561,7 @@ class Tokenizer extends UI5Element implements IFormInputElement {
if (nextToken && !isPhone()) {
setTimeout(() => {
nextToken.focus();
this._itemNav.setCurrentItem(nextToken);
}, 0);
}
}
Expand Down Expand Up @@ -977,7 +978,7 @@ class Tokenizer extends UI5Element implements IFormInputElement {
this._itemNav._currentIndex = -1;
this._skipTabIndex = true;

if (!this.contains(relatedTarget)) {
if (!this.contains(relatedTarget) && !this.preventInitialFocus) {
this._tokens[0].forcedTabIndex = "0";
this._isFocusSetInternally = false;
this._skipTabIndex = false;
Expand Down
Loading