diff --git a/packages/main/cypress/specs/Tokenizer.cy.tsx b/packages/main/cypress/specs/Tokenizer.cy.tsx
index 3a188a81cab6..0dd97b5ce12a 100755
--- a/packages/main/cypress/specs/Tokenizer.cy.tsx
+++ b/packages/main/cypress/specs/Tokenizer.cy.tsx
@@ -63,7 +63,7 @@ describe("General Interaction", () => {
describe("Tokenizer nMore Popover", () => {
it("tests opening of nMore Popover", () => {
cy.mount(
-
+
@@ -102,7 +102,7 @@ describe("Tokenizer nMore Popover", () => {
it("tests F7 list item navigation", () => {
cy.mount(
-
+
@@ -190,7 +190,7 @@ describe("Tokenizer nMore Popover", () => {
it("tests item deletion via keyboard", () => {
cy.mount(
-
+
@@ -350,7 +350,7 @@ describe("Readonly", () => {
it("tests expanding of tokenizer + focus handling in readonly mode.", () => {
cy.mount(
-
+
@@ -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(
@@ -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]", () => {
@@ -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(
+ <>
-
-
- >
- );
-
- 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(
- <>
+
+
+ >
+ );
+
+ 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(
+ <>
@@ -1852,28 +1877,28 @@ describe("Tokenizer - getFocusDomRef Method", () => {
-
- >
- );
+
+ >
+ );
- 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");
});
});
diff --git a/packages/main/src/Tokenizer.ts b/packages/main/src/Tokenizer.ts
index 568c35149371..2a3aa200cd83 100644
--- a/packages/main/src/Tokenizer.ts
+++ b/packages/main/src/Tokenizer.ts
@@ -561,6 +561,7 @@ class Tokenizer extends UI5Element implements IFormInputElement {
if (nextToken && !isPhone()) {
setTimeout(() => {
nextToken.focus();
+ this._itemNav.setCurrentItem(nextToken);
}, 0);
}
}
@@ -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;