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;