[UTree] How to programmatically select UTree item?

[KazimirPodolski]

Package

v4.x

Description

I need to synchronize selected item(s) in my Tree with current route. So when an item id=123 is selected, the route is #/items/123. Worst of all, I need it with multiple+bubbleSelect+selectionBehavior="replace".

You can imagine a file manager where Tree is the filesystem and current route is the filepath.

Item selected -> update route is obvious to me:

<script>
const syncRoute = (item: TreeItem) => router.push({name: 'item', params: {id: item.id}})
</script>
<template>
<UTree @update:modelValue="syncRoute"/>
</template>

But how do I do the opposite? Route is updated -> select current item:

<script>
const syncRoute = (item: TreeItem) => router.push({name: 'item', params: {id: item.id}})

const selected = ref<TreeItem[]>([]);
watch(router.currentRoute, currentRoute => {
  const itemRoute = currentRoute.matched.find(candidate => candidate.name === 'item')
  if (itemRoute) {
    // how to select the item?
  }
})
</script>
<template>
<UTree @update:modelValue="syncRoute" v-model="selected"/>
</template>

The issue above is I cannot simply put a TreeItem into selected.value as it must be the whole path from the item to tree root due to bubbleSelect. Looking at the source, Reka actually builds a tree structure internally and maintains parent prop which would make selecting with bubbleSelect easy, but it's not exposed outside.

One alternative is to give up on the "tree" aspect of UTree and completely make the tree structure myself. But I would like to reuse UTree to the max if possible.

[krotname]

There is no public imperative API on UTree for "select the item with key X". The supported controlled API is still v-model, but you need to derive the value from your own items tree, not from Reka's internal flattened tree.

UTree passes modelValue directly to Reka TreeRoot, and Reka stores the selected values as the item objects themselves. bubbleSelect is applied inside Reka's onSelect(...) path; it is not a separate public helper you can call from the outside.

So I would make the route sync data-driven:

const selected = ref<TreeItem[]>([])
const expanded = ref<string[]>([])

const itemById = new Map<string, TreeItem>()
const parentById = new Map<string, TreeItem | null>()

function indexTree(items: TreeItem[], parent: TreeItem | null = null) {
  for (const item of items) {
    itemById.set(item.id, item)
    parentById.set(item.id, parent)
    if (item.children?.length) indexTree(item.children, item)
  }
}

indexTree(items)

function ancestors(id: string) {
  const result: TreeItem[] = []
  let parent = parentById.get(id)
  while (parent) {
    result.unshift(parent)
    parent = parentById.get(parent.id)
  }
  return result
}

function selectionFromRoute(id: string) {
  const item = itemById.get(id)
  if (!item) return []

  const value = [item]
  const selectedIds = new Set([item.id])

  // Reproduce bubbleSelect for the controlled value.
  for (const parent of ancestors(id).reverse()) {
    const allChildrenSelected = parent.children?.every(child => selectedIds.has(child.id))
    if (allChildrenSelected) {
      value.push(parent)
      selectedIds.add(parent.id)
    }
  }

  return value
}

watch(
  () => route.params.id,
  (id) => {
    if (typeof id !== 'string') return
    selected.value = selectionFromRoute(id)
    expanded.value = ancestors(id).map(item => item.id)
  },
  { immediate: true }
)

<UTree
  v-model="selected"
  v-model:expanded="expanded"
  :items="items"
  multiple
  bubble-select
  selection-behavior="replace"
  :get-key="item => item.id"
/>

Two practical notes:

• Use the same item objects from items in selected, not newly created { id } objects. get-key handles equality for selected keys, but the model value is still the item object.
• If the route represents the active file/path and checkbox selection is a separate concept, it is usually cleaner to keep selected for tree selection and keep activeId from the route for styling in the item slot. bubbleSelect is aggregation state, not really an "active path" feature.