Skip to content
Merged
60 changes: 60 additions & 0 deletions packages/main/cypress/specs/MultiInput.cy.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -544,6 +544,66 @@ describe("MultiInput tokens", () => {
.should("have.attr", "value", "Bulgaria");
});
});

describe("MultiInput Form Submission Prevention", () => {
it("should prevent form submission when Enter is pressed", () => {
cy.mount(
<form>
<MultiInput/>
</form>
);

cy.get("form")
.as("testForm")
.invoke('on', 'submit', cy.spy().as('formSubmit'));

cy.get("[ui5-multi-input]")
.shadow()
.find("input")
.as("innerInput");

cy.get("@innerInput")
.realClick()
.should("be.focused");

cy.get("@innerInput")
.realType("test value");

cy.get("@innerInput")
.realPress("Enter");

// Form submission should be prevented when there's a value
cy.get("@formSubmit").should("not.have.been.called");
});

it("should prevent form submission when there are multiple inputs in form", () => {
cy.mount(
<form>
<MultiInput id="mi-form-multi1" />
<MultiInput id="mi-form-multi2" />
</form>
);

cy.get("form")
.as("testForm")
.invoke('on', 'submit', cy.spy().as('formSubmit'));

cy.get("#mi-form-multi1")
.shadow()
.find("input")
.as("firstInput");

cy.get("@firstInput")
.realClick()
.should("be.focused");

cy.get("@firstInput")
.realPress("Enter");

cy.get("@formSubmit").should("not.have.been.called");
});
});

describe("MultiInput Truncated Token", () => {
beforeEach(() => {
cy.mount(
Expand Down
6 changes: 6 additions & 0 deletions packages/main/src/MultiInput.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ import {
isHome,
isEnd,
isDown,
isEnter,

} from "@ui5/webcomponents-base/dist/Keys.js";
import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
Expand Down Expand Up @@ -228,6 +230,10 @@ class MultiInput extends Input implements IFormInputElement {
return this._focusFirstToken(e);
}

if (isEnter(e)) {
e.preventDefault();
}

if (isLeft(e)) {
this._skipOpenSuggestions = true;
return this._handleLeft(e);
Expand Down
Loading