feat(Tree): implement bubbleSelect prop (#1802)

J-Michalek · Jakub · zernonia · web-flow · commit d317e38e6e8f · 2025-05-19T19:30:12.000+08:00
* feat(tree): implement bubbleSelect prop

* fix(tree-root): stale parent state after all children were unchecked

* chore(tree-root): remove forgotten console.log

My HMR was broken...

* test(tree): add cases for propagate and bubble select

---------

Co-authored-by: Jakub &lt;jakub.michalek@freelo.io&gt;
Co-authored-by: zernonia &lt;zernonia@gmail.com&gt;
diff --git a/packages/core/src/Tree/Tree.test.ts b/packages/core/src/Tree/Tree.test.ts
@@ -286,3 +286,50 @@ describe('given a Tree with a custom children structure', () => {
     })
   })
 })
+
+describe('given a Tree with bubbleSelect and propagateSelect', () => {
+  const customItems = [
+    {
+      title: 'components',
+      children: [
+        {
+          title: 'Home',
+          children: [
+            { title: 'Card.vue' },
+            { title: 'Button.vue' },
+          ],
+        },
+      ],
+    },
+  ]
+
+  let wrapper: VueWrapper<InstanceType<typeof Tree>>
+  let items: DOMWrapper<Element>[]
+
+  beforeEach(async () => {
+    document.body.innerHTML = ''
+    wrapper = mount(Tree, { props: { items: customItems, expanded: ['components', 'Home'], multiple: true, propagateSelect: true, bubbleSelect: true } })
+    await nextTick()
+    items = wrapper.findAll('[role=treeitem]')
+  })
+
+  it('propagates changes down the tree', async () => {
+    expect(items.map(i => i.attributes('aria-selected'))).toStrictEqual(['false', 'false', 'false', 'false'])
+    await items[0].trigger('click')
+    expect(items.map(i => i.attributes('aria-selected'))).toStrictEqual(['true', 'true', 'true', 'true'])
+    await items[0].trigger('click')
+    expect(items.map(i => i.attributes('aria-selected'))).toStrictEqual(['false', 'false', 'false', 'false'])
+  })
+
+  it('bubbles change up the tree', async () => {
+    expect(items.map(i => i.attributes('aria-selected'))).toStrictEqual(['false', 'false', 'false', 'false'])
+    await items[2].trigger('click')
+    expect(items.map(i => i.attributes('aria-selected'))).toStrictEqual(['false', 'false', 'true', 'false'])
+    await items[3].trigger('click')
+    expect(items.map(i => i.attributes('aria-selected'))).toStrictEqual(['true', 'true', 'true', 'true'])
+    await items[2].trigger('click')
+    expect(items.map(i => i.attributes('aria-selected'))).toStrictEqual(['false', 'false', 'false', 'true'])
+    await items[3].trigger('click')
+    expect(items.map(i => i.attributes('aria-selected'))).toStrictEqual(['false', 'false', 'false', 'false'])
+  })
+})
diff --git a/packages/core/src/Tree/TreeItem.vue b/packages/core/src/Tree/TreeItem.vue
@@ -65,7 +65,13 @@ const isSelected = computed(() => {
 })
 
 const isIndeterminate = computed(() => {
-  if (rootContext.propagateSelect.value && isSelected.value && hasChildren.value && Array.isArray(rootContext.modelValue.value)) {
+  if (rootContext.bubbleSelect.value && hasChildren.value && Array.isArray(rootContext.modelValue.value)) {
+    const children = flatten<T, any>(rootContext.getChildren(props.value) || [])
+
+    return children.some(child => rootContext.modelValue.value.find((v: any) => rootContext.getKey(v) === rootContext.getKey(child)))
+      && !children.every(child => rootContext.modelValue.value.find((v: any) => rootContext.getKey(v) === rootContext.getKey(child)))
+  }
+  else if (rootContext.propagateSelect.value && isSelected.value && hasChildren.value && Array.isArray(rootContext.modelValue.value)) {
     const children = flatten<T, any>(rootContext.getChildren(props.value) || [])
 
     return !children.every(child => rootContext.modelValue.value.find((v: any) => rootContext.getKey(v) === rootContext.getKey(child)))
diff --git a/packages/core/src/Tree/TreeRoot.vue b/packages/core/src/Tree/TreeRoot.vue
@@ -28,6 +28,8 @@ export interface TreeRootProps<T = Record<string, any>, U extends Record<string,
   disabled?: boolean
   /** When `true`, selecting parent will select the descendants. */
   propagateSelect?: boolean
+  /** When `true`, selecting children will update the parent state. */
+  bubbleSelect?: boolean
 }
 
 export type TreeRootEmits<T = Record<string, any>> = {
@@ -49,6 +51,7 @@ interface TreeRootContext<T = Record<string, any>> {
   disabled: Ref<boolean>
   dir: Ref<Direction>
   propagateSelect: Ref<boolean>
+  bubbleSelect: Ref<boolean>
   isVirtual: Ref<boolean>
   virtualKeydownHook: EventHook<KeyboardEvent>
 
@@ -97,7 +100,7 @@ defineSlots<{
   }) => any
 }>()
 
-const { items, multiple, disabled, propagateSelect, dir: propDir } = toRefs(props)
+const { items, multiple, disabled, propagateSelect, dir: propDir, bubbleSelect } = toRefs(props)
 const { handleTypeaheadSearch } = useTypeahead()
 const dir = useDirection(propDir)
 const rovingFocusGroupRef = ref<InstanceType<typeof RovingFocusGroup>>()
@@ -189,6 +192,27 @@ function handleKeydownNavigation(event: KeyboardEvent) {
   })
 }
 
+function handleBubbleSelect(item: FlattenedItem<T>) {
+  if (item.parentItem != null && Array.isArray(modelValue.value) && props.multiple) {
+    const parentItem = expandedItems.value.find((i) => {
+      return item.parentItem != null && props.getKey(i.value) === props.getKey(item.parentItem)
+    })
+
+    if (parentItem != null) {
+      const areAllChilredOfParentSelected = props.getChildren(parentItem.value)?.every(i => modelValue.value.find((v: any) => props.getKey(v) === props.getKey(i)))
+
+      if (areAllChilredOfParentSelected) {
+        modelValue.value = [...modelValue.value, parentItem.value as any]
+      }
+      else {
+        modelValue.value = modelValue.value.filter((v: any) => props.getKey(v) !== props.getKey(parentItem.value))
+      }
+
+      handleBubbleSelect(parentItem)
+    }
+  }
+}
+
 provideTreeRootContext({
   modelValue,
   selectedKeys,
@@ -197,8 +221,18 @@ provideTreeRootContext({
     const exist = props.multiple && Array.isArray(modelValue.value) ? modelValue.value?.findIndex(condition) !== -1 : undefined
     onSelectItem(val, condition)
 
+    if (props.bubbleSelect && props.multiple && Array.isArray(modelValue.value)) {
+      const item = expandedItems.value.find((i) => {
+        return props.getKey(i.value) === props.getKey(val)
+      })
+      if (item != null) {
+        handleBubbleSelect(item)
+      }
+    }
+
     if (props.propagateSelect && props.multiple && Array.isArray(modelValue.value)) {
       const children = flatten<U, any>(props.getChildren(val) ?? [])
+
       if (exist) {
         // remove all child
         modelValue.value = [...modelValue.value]
@@ -230,6 +264,7 @@ provideTreeRootContext({
   multiple,
   dir,
   propagateSelect,
+  bubbleSelect,
 
   isVirtual,
   virtualKeydownHook,
diff --git a/packages/core/src/Tree/story/TreeCheckbox.story.vue b/packages/core/src/Tree/story/TreeCheckbox.story.vue
@@ -17,11 +17,12 @@ import { items } from './constants'
         :get-key="(item) => item.title"
         multiple
         propagate-select
+        bubble-select
       >
         <TreeItem
           v-for="item in flattenItems"
           :key="item._id"
-          v-slot="{ handleSelect, isSelected }"
+          v-slot="{ handleSelect, isSelected, isIndeterminate }"
           v-bind="item.bind"
           :style="{ 'margin-left': `${item.level - 1}rem` }"
           class="flex items-center py-1 px-2 my-0.5 rounded w-max outline-none focus:ring-grass9 focus:ring-2 data-[selected]:bg-grass4"
@@ -39,6 +40,7 @@ import { items } from './constants'
             :checked="isSelected"
             type="checkbox"
             tabindex="-1"
+            :indeterminate="isIndeterminate"
             @click.stop
             @change="handleSelect"
           >
