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) {