TreeSelect component

[wang2lang]

Usage example, including component/hook API

https://github.com/react-component/tree
https://github.com/react-component/tree-select

Possible implementation – describe how the feature can be implemented

No response

Do you want to contribute this feature and create a pull request

No response

[zhulien-ivanov]

Those are the only 2 essential components for a UI library that are still missing. We're planning migration to Mantine but can't do it without a TreeSelect of some sort. Do you have any plans on implementing this for the next major release?

[pavi2410]

@rtivital Let me know if you require any help. I need this component.

[pavi2410]

I just migrated this component to v7 and added collapsibility.

[pavi2410]

This might look better now. I changed how indents are positioned.

[pavi2410]

This is definitely a lot inspired by VS Code.

[pavi2410]

Where was this hiding for so long?
https://www.w3.org/WAI/ARIA/apg/patterns/treeview/

[pavi2410]

I've moved to a different UI library which has more enterprise components such as the Tree. See https://primereact.org

[stephenirven]

I'm also interested in this. For info of anyone looking for a solution right now, it could be worth looking at this https://github.com/minop1205/react-dnd-treeview

It seems to be quite fully featured, and there are CodeSandbox samples for various use cases including select. The samples use Material-UI, but the module doesn't depend on it, so it's possible to get it working with Mantine.

[lifeparticle]

A treeview would be a great component. Thanks!

[adamerose]

[rtivital]

Issues are now used to track bugs, feature requests are just proposals that we can consider implementing, while are the real issues we are planning to resolve.

[bezvrednyy]

Yes, that would be cool ! I'm waiting =)

There are already groups now, it would be great if the list could collapse.

[zhulien-ivanov]

Is this still planned for an upcoming release (including v5)?

[pavi2410]

There seems to be many kinds of treeview select in UI design, such inside a dropdown, toolbar, or as a list with/without collapsible variants.

It's too broad to implement. I think the better way to implement this is to extend existing components.

Here's a mapping of components that can be extended:
Select -> TreeSelect
Menu -> Nested Menu
List -> TreeList (with selectable and collapsible nodes)

[zhulien-ivanov]

We're talking specifically about https://github.com/react-component/tree-select. It's basically like a MultiSelect but supports nested items.

[rtivital]

I'm planning to add Tree component, we'll see how it goes from there

[elarens]

@rtivital Is there any timeline for that? I need to use a tree component for my dropdown menu but can't find anything headless and well maintained that I could easily adapt :(((

[bezvrednyy]

I also support the posts above !

[suchintan]

I'm looking forward to this feature as well!

[suchintan]

FYI I ended up building my own using react-dnd-treeview. It ended up playing well with mantine

[husniramdani]

this one https://www.npmjs.com/package/@minoru/react-dnd-treeview?

[DivMode]

Also looking for one with checkboxes, something like this from antd: https://codesandbox.io/s/h3ny7f?file=/index.tsx

[carafry]

Is this still on the roadmap?

It would be really useful to have a checkable tree select component similar to Ant Design: https://ant.design/components/tree-select

[langziyang]

please integrated https://www.npmjs.com/package/rc-tree-select

[starkblaze01]

We are doing an evaluation on migrating our UI components, so far Mantine is our most preferred choice, but a direct implementation of tree select would be much appreciated!! Hopefully we will get to see this component to be released soon.

[starkblaze01]

Thank you for this: https://mantine.dev/core/tree/ --> v7.10.0+

[BangHuynh0404]

This is my custom component, hop this help:
import { Combobox, useCombobox, Input, Pill, PillsInput, Checkbox } from '@mantine/core'
import { useMemo, useState } from 'react'
import { IconChevronRight, IconChevronDown } from '@tabler/icons-react'

interface TreeItem {
ID: string
Term: string
Children?: TreeItem[]
}

interface TreeMultiSelectProps {
data: TreeItem[]
value: string[]
onChange: (value: string[]) => void
placeholder?: string
className?: string
defaultExpanded?: boolean
}

export function TreeMultiSelect({
data,
value,
onChange,
placeholder,
className,
defaultExpanded = false,
}: TreeMultiSelectProps) {
const combobox = useCombobox({
onDropdownClose: () => combobox.resetSelectedOption(),
})

const [search, setSearch] = useState('')
const [expandedNodes, setExpandedNodes] = useState<Set>(() => {
if (!defaultExpanded) return new Set()

const expanded = new Set<string>()
const collectNodes = (items: TreeItem[]) => {
  items.forEach((item) => {
    if (item.Children?.length) {
      expanded.add(item.ID)
      collectNodes(item.Children)
    }
  })
}
collectNodes(data)
return expanded

})

const flattenedOptions = useMemo(() => {
const options: { value: string; label: string; level: number; hasChildren: boolean }[] = []

function processItem(item: TreeItem, level: number = 0) {
  options.push({
    value: item.ID,
    label: item.Term,
    level,
    hasChildren: !!(item.Children && item.Children.length > 0),
  })

  if (item.Children && item.Children.length > 0 && expandedNodes.has(item.ID)) {
    item.Children.forEach((child) => processItem(child, level + 1))
  }
}

data.forEach((item) => processItem(item))
return options

}, [data, expandedNodes])

const handleValueSelect = (val: string) => {
const newValue = value.includes(val) ? value.filter((v) => v !== val) : [...value, val]
onChange(newValue)
}

const handleValueRemove = (val: string) => {
onChange(value.filter((v) => v !== val))
}

const toggleNode = (nodeId: string) => {
const newExpanded = new Set(expandedNodes)
if (newExpanded.has(nodeId)) {
newExpanded.delete(nodeId)
} else {
newExpanded.add(nodeId)
}
setExpandedNodes(newExpanded)
}

const values = value.map((val) => {
const option = flattenedOptions.find((opt) => opt.value === val)
return (
<Pill key={val} withRemoveButton onRemove={() => handleValueRemove(val)}>
{option?.label || val}

)
})

const filteredOptions = flattenedOptions.filter((option) =>
option.label.toLowerCase().includes(search.toLowerCase())
)

return (

<Combobox.Target>
<PillsInput className={className} onClick={() => combobox.openDropdown()}>
<Pill.Group>
{values}
<Combobox.EventsTarget>
<PillsInput.Field
placeholder={placeholder || 'Select items'}
value={search}
onChange={(e) => setSearch(e.currentTarget.value)}
onFocus={() => combobox.openDropdown()}
onBlur={() => combobox.closeDropdown()}
onKeyDown={(event) => {
if (event.key === 'Backspace' && search.length === 0) {
event.preventDefault()
handleValueRemove(value[value.length - 1])
}
}}
/>
</Combobox.EventsTarget>
</Pill.Group>

</Combobox.Target>

  <Combobox.Dropdown>
    <Combobox.Options style={{ maxHeight: '300px', overflowY: 'auto' }}>
      {filteredOptions.length > 0 ? (
        filteredOptions.map((option) => (
          <Combobox.Option
            key={option.value}
            value={option.value}
            style={{
              paddingLeft: `${option.level * 20 + 12}px`,
              minHeight: '36px',
              display: 'flex',
              alignItems: 'center',
            }}
          >
            <div className="flex items-center gap-2">
              {option.hasChildren && (
                <div
                  onClick={(e) => {
                    e.stopPropagation()
                    toggleNode(option.value)
                  }}
                  className="cursor-pointer"
                >
                  {expandedNodes.has(option.value) ? (
                    <IconChevronDown size={16} />
                  ) : (
                    <IconChevronRight size={16} />
                  )}
                </div>
              )}
              {!option.hasChildren && <div style={{ width: 16 }} />}
              <Checkbox
                checked={value.includes(option.value)}
                onChange={(e) => {
                  e.stopPropagation()
                  handleValueSelect(option.value)
                }}
                onClick={(e) => e.stopPropagation()}
              />
              {option.label}
            </div>
          </Combobox.Option>
        ))
      ) : (
        <Combobox.Empty>Nothing found</Combobox.Empty>
      )}
    </Combobox.Options>
  </Combobox.Dropdown>
</Combobox>

)
}