diff --git a/packages/main/cypress/specs/ComboBox.cy.tsx b/packages/main/cypress/specs/ComboBox.cy.tsx index 69862539d967..3e8c38a5ec36 100644 --- a/packages/main/cypress/specs/ComboBox.cy.tsx +++ b/packages/main/cypress/specs/ComboBox.cy.tsx @@ -176,6 +176,17 @@ describe("General Interaction", () => { cy.get("[ui5-combobox]").should("have.prop", "focused", true); }); + it("keeps focused state when clicking on the arrow icon", () => { + cy.mount( + + + + ); + + cy.get("[ui5-combobox]").shadow().find("[ui5-icon]").realMouseDown(); + cy.get("[ui5-combobox]").should("have.prop", "focused", true); + }); + it("tests Combo with two-column layout", () => { cy.mount( diff --git a/packages/main/cypress/specs/MultiInput.cy.tsx b/packages/main/cypress/specs/MultiInput.cy.tsx index 5deed3d56da9..7734b4d81319 100644 --- a/packages/main/cypress/specs/MultiInput.cy.tsx +++ b/packages/main/cypress/specs/MultiInput.cy.tsx @@ -243,6 +243,30 @@ describe("MultiInput Web Component", () => { cy.get("@valueHelpTrigger") .should("have.been.calledTwice"); }); + + it("keeps focused state when clicking on value help icon", () => { + cy.mount( + + + + ); + + cy.get("[ui5-multi-input]") + .as("multiInput"); + + cy.get("@multiInput") + .shadow() + .find(".ui5-input-inner") + .as("innerInput"); + + cy.get("@multiInput") + .shadow() + .find("[ui5-icon]") + .realMouseDown(); + + cy.get("@multiInput") + .should("have.prop", "focused", true); + }); }) describe("MultiInput tokens", () => { diff --git a/packages/main/src/ComboBox.ts b/packages/main/src/ComboBox.ts index 44ea07993ce6..21c466e405c0 100644 --- a/packages/main/src/ComboBox.ts +++ b/packages/main/src/ComboBox.ts @@ -740,8 +740,12 @@ class ComboBox extends UI5Element implements IFormInputElement { }); } - _arrowClick() { + _arrowMouseDown(e: MouseEvent) { + e.preventDefault(); this.inner.focus(); + } + + _arrowClick() { this._resetFilter(); if (isPhone() && this.value && !this._lastValue) { diff --git a/packages/main/src/ComboBoxTemplate.tsx b/packages/main/src/ComboBoxTemplate.tsx index b76f1dbbb8fa..1d75e59481d6 100644 --- a/packages/main/src/ComboBoxTemplate.tsx +++ b/packages/main/src/ComboBoxTemplate.tsx @@ -62,6 +62,7 @@ export default function ComboBoxTemplate(this: ComboBox) { "inputIcon--pressed": this._iconPressed, }} accessibleName={this._iconAccessibleNameText} + onMouseDown={this._arrowMouseDown} onClick={this._arrowClick} /> } diff --git a/packages/main/src/MultiInput.ts b/packages/main/src/MultiInput.ts index 721cc1e01369..169fde3a86d0 100644 --- a/packages/main/src/MultiInput.ts +++ b/packages/main/src/MultiInput.ts @@ -32,7 +32,6 @@ import type Token from "./Token.js"; import type Tokenizer from "./Tokenizer.js"; import { getTokensCountText } from "./Tokenizer.js"; import type { TokenizerTokenDeleteEventDetail } from "./Tokenizer.js"; -import type Icon from "./Icon.js"; import type { InputSelectionChangeEventDetail as MultiInputSelectionChangeEventDetail, @@ -215,11 +214,11 @@ class MultiInput extends Input implements IFormInputElement { } valueHelpMouseDown(e: MouseEvent) { - const target = e.target as Icon; + e.preventDefault(); + this.focus(); this.closeValueStatePopover(); this.tokenizer.open = false; this._valueHelpIconPressed = true; - target.focus(); } _tokenizerFocusOut(e: FocusEvent) {