[v1-beta] QTree expand non-selectable node on header click

spyke113

I have QTree with selected.sync property, but my nodes, which have children, are set selectable to false in my nodes config. In this case, I can’t expand such nodes when clicking on node header (only on icon arrow).

components/tree/QTree.js:565

    __onClick (node, meta) {
      this.__blur()

      if (this.hasSelection) { # Why is this condition here? It is on line 104
        if (meta.selectable) {
          this.$emit('update:selected', meta.key !== this.selected ? meta.key : null)
        }
      }
      else {
        this.__onExpandClick(node, meta)
      }

      if (typeof node.handler === 'function') {
        node.handler(node)
      }
    },

@rstoenescu Could it be right like that? Or am I wrong?

    __onClick (node, meta) {
      this.__blur()

      if (meta.selectable) {
          this.$emit('update:selected', meta.key !== this.selected ? meta.key : null)
      }
      else {
        this.__onExpandClick(node, meta)
      }

      if (typeof node.handler === 'function') {
        node.handler(node)
      }
    },

Example

Pkg quasar........ v1.0.0-beta.13
Pkg @quasar/app... v1.0.0-beta.13

spyke113

@rstoenescu Should I create PR?

rstoenescu

@spyke113 Hi. Just to make sure we’re on same page: “selected” is one thing, and “expanded” is another thing. Can you create a barebones Codepen (fork it and hit save) which highlights the issue pls?

spyke113

@rstoenescu Thanks for the answer. Link to the example is at the end of the first message (Try to expand node by clicking on the header). Nodes that have children by default are expandable. Expanding such nodes is possible by clicking not only on arrow icon, but also on header (behavior #1). If such node is selectable, then its behavior changes, and now expanding of such node is available only by arrow icon. But if node is not selectable (while QTree is) and have children, then why not leave same behavior as behavior #1?

spyke113

@rstoenescu Or maybe to do something like select-strategy or expand-strategy (i don’t even know what is more appropriate here)? A setting that allows expandable nodes to be one of (we are talking only about a click on the header):

to be expanded regardless of whether it is selectable or not
to be expanded only when the node itself is not selectable, regardless of whether QTree has selected prop or not (such behavior will be at the code offered by me in the first message)
revealed only when QTree is not selected (as it is now)

spyke113

@rstoenescu Any comments please?

s.molinari

@spyke113 - To have selectable headers (ones that should expand too), you need two different click events. One for the selection and one for the expansion of the child nodes. That’s why you can only expand the tree’s branch over the expand icon, when the selected prop is in use. The fact you set the children to selectable: false is irrelevant to how the header nodes work.

Notice same behavior without selectable: false here:

https://codepen.io/smolinari/pen/JVGrOp

It seems to me, you are expecting the “selection” action/click to also expand the branch of child nodes at the same time. If that is true, I don’t see how it can be done. I was trying to make it happen, but the @update:selected event sends null, when the selection is unselected, making external logic for controlling expansion of the target node on selection events impossible.

I do believe, if the users understand that a selection and the expansion of nodes are two different things and need two different click events on a header node, then the UX is also understandable and acceptable.

Scott

s.molinari

Correction. If you use accordion mode, you can get away with it.

https://codepen.io/smolinari/pen/gyPGKN

The children just can’t be selectable.

Scott

No More Posting New Topics!

[v1-beta] QTree expand non-selectable node on header click