No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

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

    Help
    3
    3
    527
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • L
      LuckyDuckie last edited by 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)

      1 Reply Last reply Reply Quote 0
      • R
        rejhan last edited by

        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)
          }
        },
        1 Reply Last reply Reply Quote 0
        • S
          sl0w0rm last edited by 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

          1 Reply Last reply Reply Quote 0
          • First post
            Last post