Tree: How to programmatically jump to node / prevent node from losing focus



  • Hi everyone in this helpful community.
    I have a few questions regarding the quasar tree component:

    Questions: Is there a way in which I can

    1. Programmatically jump to a node in the tree (as if it were clicked by the user)?
    2. Prevent a node losing focus, even if the user clicks another node within the tree?

    Sorry if this is an easy one for some. I don’t seem to be able to figure this out, though.

    Thanks!
    Andrew



  • This is the closest I have got with it:
    html

              <q-tree
                ref="folders"
                :nodes="rootDir"
                label-key="label"
                node-key="nodeKey"
                accordion
                default-expand-all
                :selected.sync="selectedFolder"
                @lazy-load="onLazyLoad"
              />
    

    js:

        selectFolder: function (absolutePath) {
          if (absolutePath === this.selectedFolder) {
            return
          }
    
          // get parts for the path
          let parts = absolutePath.split(path.sep)
          let path2 = ''
          let lastNodeKey
          let canSetSelectedFolder = true
    
          // iterate through the path parts.
          // This code will get the node. If the node is not found,
          // it forces lazy-get by programmatically expanding
          // the parent node.
          for (let index = 0; index < parts.length; ++index) {
            if (parts[index].length === 0) {
              continue
            }
            if (index > 0) {
              path2 += path.sep
            }
            path2 += parts[index]
            if (index > 0) {
              if ('folders' in this.$refs) {
                const key = this.$refs.folders.getNodeByKey(path2)
                if (key) {
                  lastNodeKey = key
                }
                else {
                  if (lastNodeKey && lastNodeKey.children.length === 0) {
                    // this.loadChildren(lastNodeKey, lastNodeKey.nodeKey)
                    // lastNodeKey.lazy = false
                    if (!this.$refs.folders.isExpanded(lastNodeKey.nodeKey)) {
                      this.$refs.folders.setExpanded(lastNodeKey.nodeKey, true)
                      canSetSelectedFolder = false
                      this.$nextTick(() => {
                        this.selectFolder(absolutePath)
                      })
                    }
                  }
                }
              }
            }
            if (canSetSelectedFolder) {
              this.selectedFolder = absolutePath
            }
          }
        },
    

    I have also asked for a cleaner solution: https://github.com/quasarframework/quasar/issues/2737
    Note: This is based on a OS Folder system where the path is the nodeKey.