q-input inside q-tree ignoring spacebar keypress - cannot add whitespace into value
-
Hello all,
I use
q-tree
to display/modify nested/tree-like structure data.
My tree nodes can include editableq-input
text field.
This seems to work fine, when i update data, my Vue bindings are updated etc.However - any spacebar keypress is ignored - i cannot add spaces to my string inside the edited
q-input
field.I am NOT using
v-model
(:value/@input are of course mapped properly to do v-model work instead), or any e.g..trim
etc. modifiers - torso of component from the larger multiply nested components project:<q-input :value="value" @input="doInput($event)" @click.stop @keyup.space="spacePressMethod" > <template v-slot:append> <slot name="delete" /> </template> </q-input>
- I am able to copy&paste some string with spaces into the
q-input
field if attempted, and spaces do show inside, and can be edited - I cannot add my own spaces into edited string via pressing spacebar
- for each spacebar keypress, i can see that:
– thespacePressMethod
is invoked (console dump)
– space character is NOT added into string/textfield
–@input
is NOT invoked
I am not aware of any explicit keyboard handling in my components/sources - none of the parent components use e.g.
@keyup
etc. to alter/prevent keyboard behavior.Can anyone give some tips on where to look / what to google, how to narrow down the problem?
E.g. are there some Quasar components that “obviously” can cause this issue - steal keypress events etc.?Most of the discussions seem to address how to remove/prohibit spaces, but none seems to address problems with getting them to work
(will try to prepare some minimalistic js fiddle to reproduce, but I wanted to try ask before whether i’m not missing some obvious concept as am just JS junior)
- I am able to copy&paste some string with spaces into the
-
Hi, I have also stumbled to same issue and needed to implement custom space event this is how i did it :
<q-input
autofocus
@click.stop
ref=“spaceTypeNameRef”
class="full-width spaceNameInput "
v-if=“prop.node.editable”
v-model=“prop.node.name”
@keydown.enter=“saveTypeName(prop.node)”
@keydown.space=“e => spacePressed(e, prop.node)”
/>and this is the function:
spacePressed(e, node) {
if (e.target.selectionStart === node.name.length) {
node.name = node.name + ’ ’
} else {
let firstPart = node.name.substring(0, e.target.selectionStart)
let selection = e.target.selectionStart
let secondPart = node.name.substring(
e.target.selectionStart,
node.name.length
)
node.name = firstPart + ’ ’ + secondPart
let el = document.querySelector(’.spaceNameInput input’)setTimeout(function() { el.setSelectionRange(selection + 1, selection + 1) el.focus() }, 0) } },
-
It looks like the reason is the keypress handler that skips composing keys. It only affects tree item header, spacebar works fine in tree item body section.
https://github.com/quasarframework/quasar/blob/edf50853a8a69ba109ff84165e6d3163ebab2a4a/ui/src/components/tree/QTree.js#L498I’ve created a bug:
https://github.com/quasarframework/quasar/issues/7757