Skip to content
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

fix(ui5-input): call change before submit event #10613

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

fix(ui5-input): call change before submit event #10613

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3ba97bd
fix(ui5-input): call change before submit event
MapTo0 Jan 21, 2025
3bfcdb0
fix: consider submit to fire always when enter is pressed
MapTo0 Jan 22, 2025
bec6142
Merge remote-tracking branch 'origin/main' into input-subit
MapTo0 Jan 22, 2025
ae03a22
Merge remote-tracking branch 'origin/main' into input-subit
MapTo0 Feb 3, 2025
5cfb3ae
fix: add one more test
MapTo0 Feb 3, 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
74 changes: 74 additions & 0 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 @@ -125,4 +125,78 @@ describe("Input Tests", () => {
.find("ul")
.should("not.have.attr", "tabindex", "0");
});

it("tests submit and change event order", () => {
cy.mount(
<form>
<Input></Input>
</form>
);

cy.get("form")
.as("form");

cy.get("[ui5-input]")
.as("input");

// spy change event
cy.get<Input>("@input")
.then($input => {
$input.get(0).addEventListener("change", cy.spy().as("change"));
});

// spy submit event and prevent it
cy.get("@form")
.then($form => {
$form.get(0).addEventListener("submit", e => e.preventDefault());
$form.get(0).addEventListener("submit", cy.spy().as("submit"));
});

// check if submit is triggered after change
cy.get<Input>("@input")
.shadow()
.find("input")
.type("test{enter}");

cy.get("@change").should("have.been.calledBefore", cy.get("@submit"));
cy.get("@submit").should("have.been.calledOnce");
cy.get("@change").should("have.been.calledOnce");
});

it("tests if pressing enter twice fires submit 2 times and change once", () => {
cy.mount(
<form>
<Input></Input>
</form>
);

cy.get("form")
.as("form");

cy.get("[ui5-input]")
.as("input");

// spy change event
cy.get<Input>("@input")
.then($input => {
$input.get(0).addEventListener("change", cy.spy().as("change"));
});

// spy submit event and prevent it
cy.get("@form")
.then($form => {
$form.get(0).addEventListener("submit", e => e.preventDefault());
$form.get(0).addEventListener("submit", cy.spy().as("submit"));
});

// check if submit is triggered after change
cy.get<Input>("@input")
.shadow()
.find("input")
.type("test{enter}{enter}");

cy.get("@change").should("have.been.calledBefore", cy.get("@submit"));
cy.get("@submit").should("have.been.calledTwice");
cy.get("@change").should("have.been.calledOnce");
});
});
20 changes: 13 additions & 7 deletions packages/main/src/Input.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -571,7 +571,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
_handleResizeBound: ResizeObserverCallback;
_keepInnerValue: boolean;
_shouldAutocomplete?: boolean;
_keyDown?: boolean;
_enterKeyDown?: boolean;
_isKeyNavigation?: boolean;
_selectedText?: string;
_clearIconClicked?: boolean;
Expand Down Expand Up @@ -769,6 +769,13 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
}

if (isEnter(e)) {
const isValueChanged = this.previousValue === this.getInputDOMRefSync()!.value;
this._enterKeyDown = true;

if (isValueChanged && this._internals.form) {
submitForm(this);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why? This prevents firing of the change event. Defeats the purpose of the issu.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Change should be fired if the value is changed since last (final) user interaction. As final user interaction (change event) is considered pressing Enter or focus out + value is changes since last focusin. Submit event should fire always when an Enter key is pressed (as in the native input)

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ahhh, ok got it now.
The variable name is simply wrong. Should be "isValueUnchanged" or something...

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Then again, looking at the implementation of _handleEnter: You also have logic for selecting suggestion items via "Enter".

Wouldn't that also (falsely) trigger the submit?

}

return this._handleEnter(e);
}

Expand Down Expand Up @@ -796,7 +803,6 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
this._clearPopoverFocusAndSelection();
}

this._keyDown = true;
this._isKeyNavigation = false;
}

Expand All @@ -807,7 +813,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
this.value = (e.target as HTMLInputElement).value;
}

this._keyDown = false;
this._enterKeyDown = false;
MapTo0 marked this conversation as resolved.
Show resolved Hide resolved
}

_handleUp(e: KeyboardEvent) {
Expand Down Expand Up @@ -860,10 +866,6 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
if (!suggestionItemPressed) {
this.lastConfirmedValue = this.value;

if (this._internals.form) {
submitForm(this);
}

return;
}

Expand Down Expand Up @@ -1014,6 +1016,10 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
this._changeToBeFired = true;
} else {
fireChange();

if (this._enterKeyDown && this._internals.form) {
submitForm(this);
}
}
}
}
Expand Down