Below are the code, I am using with vue js modifiers with kepress.enter its not submitting text if I change keyup.enter its working fine but space button is not working anyone please help here need to change anything here.
<input
v-model="query"
class="chat-field-input"
type="text"
autofocus
:placeholder="$t('inputTitle')"
:aria-label="$t('inputTitle')"
:disabled=this.disabledtextbox
@keypress.enter="submit({ text: query })"
@input="$emit('input')"
@blur="$emit('blur')"
@focus="
microphone = false;
should_listen = false;
$emit('typing');
"/>
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.