The tree component shows a "None" as value when you click the second time on the same node

[vindevoy]

Description

In the Tree control, the value is wrong when you click a second time on a node.

In the documentation on https://nicegui.io/documentation#tree, you can reproduce the error as follows:

1. Open the Tree control to show the numbers
2. Click on "1". Notice that there's a notification of "1" in the browser
3. Wait a second and click on "1" again. Notice that there's a notification of .... "None" instead in the browser

The behavior continues: when you again click on "1", you will see "1", clicking a fourth time results in a "None" again

[falkoschindler]

Hi @vindevoy!
The behavior you're describing is intentional. You can select and unselect tree items.
See the QTree documentation for an example: https://quasar.dev/vue-components/tree#selection-vs-ticking-expansion

[vindevoy]

Hi @falkoschindler,

Changing the "on_select" to "on_tick" does not show anything as notification. What is the "on_tick" supposed to do ?

The behaviour feels strange. When I click on the node of a Tree, I expect something to happen. Like in a menu. How could I mimic this behaviour then ?

[falkoschindler]

For on_tick to do anything you need to set a "tick-strategy":

ui.tree([
    {'id': 'numbers', 'children': [{'id': '1'}, {'id': '2'}]},
    {'id': 'letters', 'children': [{'id': 'A'}, {'id': 'B'}]},
], label_key='id', on_tick=lambda e: ui.notify(e.value)).props('tick-strategy=strict')

In 39c0d27 I added a parameter tick_strategy and a demo to make the usage of ui.tree with checkboxes more obvious.

[vindevoy]

For my own documentation and maybe for others, I found a way that suits me more. When I click on a node that is already selected, nothing happens.

from nicegui import ui

ui.tree([
    {'id': 'numbers', 'children': [{'id': '1'}, {'id': '2'}]},
    {'id': 'letters', 'children': [{'id': 'A'}, {'id': 'B'}]},
], label_key='id', on_select=lambda e: ui.notify(e.value) ).props("no-selection-unset=true")

ui.run()