primevue
primevue copied to clipboard
DataTable: "Space" KeyInput - don't work on mode="edit-row"
Describe the bug
DataTable -> Column -> <template #editor> -> InputText -> "space" KeyButton don't work
in this example. ama press the key button space probably 50 times https://github.com/user-attachments/assets/5423db1f-0cf0-4e31-a691-b731abc966f7
I studied how it all works and found a way to fix it.
In our case, we assign @keydown.space.stop
to the input, because primevue has its own event handler, and in our case - on eventPhase - 1 -> keydown.space event work correctly, but on eventPhase - 3 -> primevue use internal event handler, and mu event just no working.
I understand about i have a old version, but maybe you know another variant for simple option of this problem
Reproducer
https://stackblitz.com/edit/primevue-3-vite-ts-issue-template-odjtfl?file=src%2FApp.vue,package.json,src%2FOriginalNotWorkingFile.vue
PrimeVue version
^3.29.1
Vue version
3.x
Language
TypeScript
Build / Runtime
Vite
Browser(s)
No response
Steps to reproduce the behavior
I made the same script(on stackblitz), but I don't get the error that the space is not put. File "App.vue". On stackblitz have a file with name "OriginalNotWorkingFile.vue".
In our project
"Space" KeyInput - NOT working
<p-column>
<template #body="{ data, field }">
...
</template>
<template #editor="{ data, field }">
...
<p-inputtext
v-else
v-model="data[field]"
style="width: 100%"
:type="col.type === 'number' ? 'number' : 'text'"
/>
</template>
</p-column>
"Space" KeyInput - working
<template v-if="field === 'Group Name'">
<p-input-text v-model="data[field]" @keydown.space.stop />
</template>
Expected behavior
a space is put when editing a line in edit-mode="row"
p.s. the code is very bad in the file, I know, but this is the safest file for public display, we have this problem all in project.