Skip to content

fix(ui5-input): prevent double opening of VSM #12715

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

fix(ui5-input): prevent double opening of VSM #12715

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
38c3aea
fix(ui5-input): prevent double opening of VSM
ivoplashkov Nov 24, 2025
62d4543
fix(ui5-input): add test
ivoplashkov Nov 25, 2025
5fa999a
fix(ui5-input): correct lint
ivoplashkov Nov 25, 2025
73aed8a
fix(ui5-input): correct lint
ivoplashkov Nov 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
157 changes: 100 additions & 57 deletions packages/main/cypress/specs/Input.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -491,19 +491,19 @@ describe("Input general interaction", () => {
);

cy.get("#input-equal-click")
.shadow()
.find("input")
.click()
.realType("Cozy");
.shadow()
.find("input")
.click()
.realType("Cozy");

cy.get("#input-equal-click")
.shadow()
.find<ResponsivePopover>("[ui5-responsive-popover]")
.ui5ResponsivePopoverOpened();
.shadow()
.find<ResponsivePopover>("[ui5-responsive-popover]")
.ui5ResponsivePopoverOpened();

cy.get('#input-equal-click')
.find('ui5-suggestion-item[text="Cozy"]')
.click();
.find('ui5-suggestion-item[text="Cozy"]')
.click();

cy.get("#input-equal-click").should("have.value", "Cozy");
cy.get("@onChange").should("have.been.calledOnce");
Expand All @@ -527,15 +527,15 @@ describe("Input general interaction", () => {
);

cy.get("#input-equal-keyboard")
.shadow()
.find("input")
.click()
.realType("Cozy");
.shadow()
.find("input")
.click()
.realType("Cozy");

cy.get("#input-equal-keyboard")
.shadow()
.find<ResponsivePopover>("[ui5-responsive-popover]")
.ui5ResponsivePopoverOpened();
.shadow()
.find<ResponsivePopover>("[ui5-responsive-popover]")
.ui5ResponsivePopoverOpened();

cy.realPress("ArrowDown");
cy.realPress("Enter");
Expand Down Expand Up @@ -821,7 +821,7 @@ describe("Input Ctrl + Alt + F8 navigation", () => {
.should("have.focus");

cy.get("@secondLink")
.realPress("Tab");
.realPress("Tab");

cy.get("@secondInput")
.should("have.focus");
Expand Down Expand Up @@ -1582,9 +1582,9 @@ describe("Input general interaction", () => {
// Mount Input with suggestions and a change event spy
cy.mount(
<Input
id="myInput"
showSuggestions={true}
onChange={cy.spy().as("changeSpy")}
id="myInput"
showSuggestions={true}
onChange={cy.spy().as("changeSpy")}
>
<SuggestionItem text="Canada"></SuggestionItem>
<SuggestionItem text="Cuba"></SuggestionItem>
Expand Down Expand Up @@ -1798,7 +1798,7 @@ describe("Input general interaction", () => {
.find("input")
.should("not.have.attr", "aria-describedby");
});

it("Checks if aria-label is reflected in the shadow DOM", () => {
const accessibleName = "New cool text";
cy.mount(<Input accessibleName={accessibleName} />);
Expand Down Expand Up @@ -1961,7 +1961,7 @@ describe("Input general interaction", () => {
cy.get("#input-disabled-autocomplete").shadow().find("input").click().realType("c");
cy.get("#input-disabled-autocomplete").shadow().find("input").should("have.value", "c");
});

it("Tests disabled autocomplete(type-ahead)", () => {
cy.mount(
<Input id="input-disabled-autocomplete" showSuggestions noTypeahead>
Expand Down Expand Up @@ -1999,9 +1999,9 @@ describe("Input general interaction", () => {

cy.get("#inputPreview2").shadow().find("input").click().realType("c");
cy.get("#inputPreview2")
.shadow()
.find<ResponsivePopover>("[ui5-responsive-popover]")
.ui5ResponsivePopoverOpened();
.shadow()
.find<ResponsivePopover>("[ui5-responsive-popover]")
.ui5ResponsivePopoverOpened();

cy.get("#inputPreview2").shadow().find("input").realPress("ArrowDown");

Expand All @@ -2020,9 +2020,9 @@ describe("Input general interaction", () => {

cy.get("#myInput").shadow().find("input").click().realType("a");
cy.get("#myInput")
.shadow()
.find<ResponsivePopover>("[ui5-responsive-popover]")
.ui5ResponsivePopoverOpened();
.shadow()
.find<ResponsivePopover>("[ui5-responsive-popover]")
.ui5ResponsivePopoverOpened();

cy.get("#myInput").shadow().find<ResponsivePopover>("ui5-responsive-popover").ui5ResponsivePopoverOpened();
cy.get("@onOpen").should("have.been.calledOnce");
Expand Down Expand Up @@ -2057,17 +2057,17 @@ describe("Input general interaction", () => {

cy.get("#inputInDialog").shadow().find("input").realType("c");
cy.get("#inputInDialog")
.shadow()
.find<ResponsivePopover>("[ui5-responsive-popover]")
.ui5ResponsivePopoverOpened();
.shadow()
.find<ResponsivePopover>("[ui5-responsive-popover]")
.ui5ResponsivePopoverOpened();
cy.get("#inputInDialog").shadow().find<ResponsivePopover>("ui5-responsive-popover").ui5ResponsivePopoverOpened();

cy.get("#inputInDialog").shadow().find("input").realPress("ArrowDown");
cy.get("#inputInDialog").shadow().find("input").realPress("Escape");
cy.get("#inputInDialog")
.shadow()
.find<ResponsivePopover>("[ui5-responsive-popover]")
.ui5ResponsivePopoverClosed();
.shadow()
.find<ResponsivePopover>("[ui5-responsive-popover]")
.ui5ResponsivePopoverClosed();
cy.get("#dialog").should("have.attr", "open");
});

Expand Down Expand Up @@ -2221,7 +2221,7 @@ describe("Input general interaction", () => {
.as("popover")
.ui5ResponsivePopoverOpened();

cy.get("#openPickerInput")
cy.get("#openPickerInput")
.shadow()
.find<ResponsivePopover>("[ui5-responsive-popover]")
.should("have.attr", "open");
Expand Down Expand Up @@ -2295,7 +2295,7 @@ describe("Input general interaction", () => {
});

it("Tests prevented input event", () => {
cy.mount(<Input id="prevent-input-event" onInput={e => (e.target as Input).value.length > 3 ? e.preventDefault() : null}/>);
cy.mount(<Input id="prevent-input-event" onInput={e => (e.target as Input).value.length > 3 ? e.preventDefault() : null} />);

cy.get("#prevent-input-event").shadow().find("input").click().realType("abcd");
cy.get("#prevent-input-event").should("have.value", "abc");
Expand Down Expand Up @@ -2498,9 +2498,9 @@ describe("Lazy loading", () => {

cy.get("#field").shadow().find("input").click().realType("a");
cy.get("#field")
.shadow()
.find<ResponsivePopover>("[ui5-responsive-popover]")
.ui5ResponsivePopoverOpened();
.shadow()
.find<ResponsivePopover>("[ui5-responsive-popover]")
.ui5ResponsivePopoverOpened();
});

it("Does not reopen picker on focus in", () => {
Expand All @@ -2516,9 +2516,9 @@ describe("Lazy loading", () => {
cy.get("#field").shadow().find("input").realPress("Tab");
cy.wait(3000);
cy.get("#field")
.shadow()
.find<ResponsivePopover>("[ui5-responsive-popover]")
.ui5ResponsivePopoverClosed();
.shadow()
.find<ResponsivePopover>("[ui5-responsive-popover]")
.ui5ResponsivePopoverClosed();
});

it("Should not close picker when items are updated", () => {
Expand All @@ -2531,14 +2531,14 @@ describe("Lazy loading", () => {

cy.get("#field1").shadow().find("input").click().realType("S");
cy.get("#field1")
.shadow()
.find<ResponsivePopover>("[ui5-responsive-popover]")
.ui5ResponsivePopoverOpened();
.shadow()
.find<ResponsivePopover>("[ui5-responsive-popover]")
.ui5ResponsivePopoverOpened();
cy.get("#field1").shadow().find("input").realType("b");
cy.get("#field1")
.shadow()
.find<ResponsivePopover>("[ui5-responsive-popover]")
.ui5ResponsivePopoverOpened();
.shadow()
.find<ResponsivePopover>("[ui5-responsive-popover]")
.ui5ResponsivePopoverOpened();
});
});

Expand Down Expand Up @@ -2609,9 +2609,9 @@ describe("Property open", () => {
);

cy.get("#input-suggestions-open")
.shadow()
.find<ResponsivePopover>("[ui5-responsive-popover]")
.ui5ResponsivePopoverOpened();
.shadow()
.find<ResponsivePopover>("[ui5-responsive-popover]")
.ui5ResponsivePopoverOpened();
cy.get("#input-suggestions-open").find("ui5-suggestion-item").should("have.length", 3);
});

Expand All @@ -2625,9 +2625,52 @@ describe("Property open", () => {
);

cy.get("#input-suggestions-open")
.shadow()
.find<ResponsivePopover>("[ui5-responsive-popover]")
.ui5ResponsivePopoverClosed();
.shadow()
.find<ResponsivePopover>("[ui5-responsive-popover]")
.ui5ResponsivePopoverClosed();
});

it("should show only one valuestate popover when valueState changes during typing", () => {
cy.mount(
<Input
id="input-valuestate-dynamic"
valueState="None"
showSuggestions={true}
onInput={(e) => {
(e.target as Input).valueState = "Negative";
}}
>
<SuggestionItem text="Apple"></SuggestionItem>
</Input>
);

cy.get("#input-valuestate-dynamic")
.as("input")
.realClick();

cy.get("@input")
.should("be.focused");

cy.get("@input")
.realType("a");

cy.get("@input")
.should("have.attr", "value-state", "Negative");

cy.get("@input")
.shadow()
.find("[ui5-responsive-popover]")
.as("suggestionsPopover")
.should("have.attr", "open");

cy.get("@input")
.realPress("Escape");

cy.get("@input")
.shadow()
.find("[ui5-popover]")
.as("valueStatePopover")
.should("have.attr", "open");
});
});

Expand Down Expand Up @@ -2665,7 +2708,7 @@ describe("Input Composition", () => {
cy.get("@input").should("have.prop", "_isComposing", true);

cy.get("@nativeInput").trigger("compositionend", { data: "사랑" });

cy.get("@nativeInput")
.invoke("val", "사랑")
.trigger("input", { inputType: "insertCompositionText" });
Expand Down Expand Up @@ -2720,7 +2763,7 @@ describe("Input Composition", () => {
cy.get("@input").should("have.prop", "_isComposing", true);

cy.get("@nativeInput").trigger("compositionend", { data: "ありがとう" });

cy.get("@nativeInput")
.invoke("val", "ありがとう")
.trigger("input", { inputType: "insertCompositionText" });
Expand Down Expand Up @@ -2775,7 +2818,7 @@ describe("Input Composition", () => {
cy.get("@input").should("have.prop", "_isComposing", true);

cy.get("@nativeInput").trigger("compositionend", { data: "谢谢" });

cy.get("@nativeInput")
.invoke("val", "谢谢")
.trigger("input", { inputType: "insertCompositionText" });
Expand Down
23 changes: 12 additions & 11 deletions packages/main/src/Input.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -762,20 +762,21 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
const hasItems = !!this._flattenItems.length;
const hasValue = !!this.value;
const isFocused = this.shadowRoot!.querySelector("input") === getActiveElement();
if (this.shouldDisplayOnlyValueStateMessage) {
this.openValueStatePopover();
} else {
this.closeValueStatePopover();
}

const preventOpenPicker = this.disabled || this.readonly;
const shouldOpenSuggestions = !preventOpenPicker && !this._isPhone && hasItems && (this.open || (hasValue && isFocused && this.isTyping));

if (preventOpenPicker) {
this.open = false;
} else if (!this._isPhone) {
this.open = hasItems && (this.open || (hasValue && isFocused && this.isTyping));
}

if (this.shouldDisplayOnlyValueStateMessage && !shouldOpenSuggestions) {
this.openValueStatePopover();
} else {
this.closeValueStatePopover();
}

const value = this.value;
const innerInput = this.getInputDOMRefSync();

Expand Down Expand Up @@ -980,9 +981,9 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
});
link.addEventListener("keydown", this._linksListenersArray[index]);
});
}
}

_removeLinksEventListeners() {
_removeLinksEventListeners() {
const links = this.linksInAriaValueStateHiddenText;

links.forEach((link, index) => {
Expand Down Expand Up @@ -1105,7 +1106,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
* Called on "focusin" of the native input HTML Element.
* **Note:** implemented in MultiInput, but used in the Input template.
*/
innerFocusIn(): void | undefined {}
innerFocusIn(): void | undefined { }

_onfocusout(e: FocusEvent) {
const toBeFocused = e.relatedTarget as HTMLElement;
Expand Down Expand Up @@ -1443,7 +1444,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
// If the feature is preloaded (the user manually imported InputSuggestions.js), it is already available on the constructor
if (Input.SuggestionsClass) {
setup(Input.SuggestionsClass);
// If feature is not preloaded, load it dynamically
// If feature is not preloaded, load it dynamically
} else {
import("./features/InputSuggestions.js").then(SuggestionsModule => {
setup(SuggestionsModule.default);
Expand Down Expand Up @@ -1802,7 +1803,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
const links: Array<HTMLElement> = [];
if (this.valueStateMessage) {
this.valueStateMessage.forEach(element => {
if (element.children.length) {
if (element.children.length) {
element.querySelectorAll("ui5-link").forEach(link => {
links.push(link as HTMLElement);
});
Expand Down
Loading
Loading