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:

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



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

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


Log in to reply