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.

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

Conversation

MapTo0
Copy link
Member

@MapTo0 MapTo0 commented Jan 21, 2025

FIXES: #10534

@MapTo0
Copy link
Member Author

MapTo0 commented Jan 21, 2025

typo in branch name but should be fine :D

@texttechne
Copy link

Wrong Behavior

The current implementation will only fire the submit event on enter if the input has changed.
That's a surprising behavior for users. I would guess that users will flag this as a bug.
A changed value is not the precondition for a form submit.

Prevent Submitting

By facilitating keydown to store that the user pressed "enter" you're quite early in the event chain. Order of events when not using UI5 WC:

  1. keydown
  2. keypress (deprecated)
  3. beforeinput
  4. input (actually irrelevant for "enter" as this event is not triggered for this non-character input)
  5. change
  6. here comes the form submit
  7. keyup

So with the planned modification the order of things would be correct.
However, because enter is stored on keydown we don't have any chance of preventing the submit.
Native inputs alllow to use e.preventDefault() in order to prevent the form submit for the following events:

  • keydown
  • keypress

UI5 WC should stay in line with this native behavior. So I would suggest to trigger the submit event as first thing within the keyup event handler.

this._enterKeyDown = true;

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

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)

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...

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?

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

this._keyDown = false;
this._enterKeyDown = false;

Choose a reason for hiding this comment

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

Wouldn't this prevent execution of the code in "_handleChange"? Keyup comes before focusout, which is used for the change event, right?

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 event, by definition, is fired on key down of Enter key or on focusout

Copy link

@texttechne texttechne Jan 27, 2025

Choose a reason for hiding this comment

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

Ok, didn't get the magic that _handleChange is called implicitly when the change event is fired. So when change is fired via the change event by pressing Enter everything is fine!

EDIT: Thought that setting this here would have a side effect on _hanldeChange when triggered via _focusout. However, it's all fine here, because that shouldn't trigger a submit...

@MapTo0 MapTo0 requested a review from ndeshev February 4, 2025 08:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Form Inputs]: Enter Triggers Submit Instantly & Should be Opt-In
2 participants