Input: How to differentiate ENTER pressed from focusOut

[maitefdupont]

According to the Input Docs, onchange is triggered when ENTER is pressed or on focus out.

In reality these two events are very different. In case of focusout, the user may still be in the middle of typing and will come back. When ENTER is pressed, it should signal that work is done.
My question is, how to differentiate the two?

Many thanks for the support!

[MarcusNotheis]

Thanks for reaching out! As the Input component is developed in the UI5 Web Components repository, I'll forward this discussion to their repository.

[qasic]

If you want to only capture ENTER events, you can use the keyup event on the element itself.

Here's some sample code:

const query = document.getElementById('query');
query?.addEventListener('keyup', (keyEvent) => {
  if (keyEvent.code.includes('Enter')) {
    // ... handle ENTER workflow ...
  }
});

Here's the MDN documentation for the event.