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 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:

        <template v-slot:append>
          <slot name="delete" />
    • 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)

  • Hi, I have also stumbled to same issue and needed to implement custom space event this is how i did it :
    class="full-width spaceNameInput "
    @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(
    node.name = firstPart + ’ ’ + secondPart
    let el = document.querySelector(’.spaceNameInput input’)

        setTimeout(function() {
          el.setSelectionRange(selection + 1, selection + 1)
        }, 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.

    I’ve created a bug:

Log in to reply