q-input inside q-tree ignoring spacebar keypress - cannot add whitespace into value

LuckyDuckie

Hello all,

I use q-tree to display/modify nested/tree-like structure data.
My tree nodes can include editable q-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:
– the spacePressMethod 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)

rejhan

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)
  }
},

sl0w0rm

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#L498

I’ve created a bug:
https://github.com/quasarframework/quasar/issues/7757

No More Posting New Topics!

q-input inside q-tree ignoring spacebar keypress - cannot add whitespace into value