In Vue 3, the keypress event is deprecated and is no longer reliable for handling key events, especially for the Enter key. Instead, you should use @keyup.enter or @keydown.enter to handle Enter key presses consistently.

The @keyup.enter event is generally preferred for cases like form submission, as it triggers when the user releases the Enter key. Using @keyup will ensure other keys, like the Space bar, work normally without interference.

You can modify you code like this.

  <input
  v-model="query"
  class="chat-field-input"
  type="text"
  autofocus
  :placeholder="$t('inputTitle')"
  :aria-label="$t('inputTitle')"
  :disabled="disabledtextbox"
  @keyup.enter="submit({ text: query })"
  @input="$emit('input')"
  @blur="$emit('blur')"
  @focus="
    microphone = false;
    should_listen = false;
    $emit('typing');
  "
/>

Explanation Replaced @keypress.enter with @keyup.enter: The @keyup.enter event captures the Enter key consistently across browsers and is not deprecated in Vue 3.

Additional Note If you ever need to handle key events differently, consider @keydown or @keyup depending on when you want the event to trigger (when the key is pressed down vs. released). But for most cases involving text input submission on Enter, @keyup.enter is a solid choice.