Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Add showCheckedItem to TreeSelect

See original GitHub issue

What problem does this feature solve?

We don’t always want to show selected nodes inside the input box.

Why? There are at least two use cases needs custom display of selected nodes:

When there are a lot of options, and user might choose a large number of nodes like the example below, which looks bad, and hard for user to locate any node.

example: screen shot 2017-09-25 at 10 16 03 pm

For TreeSelect, we would like to show hierarchy of selected nodes, instead of just putting everything as same level inside the input box.

What does the proposed API look like?

Just add one new showCheckedItem to hide control nodes inside input box, and this allows developers to customize the display of selected node, like this: screen shot 2017-09-25 at 9 33 39 pm

If this feature is approved, I can make a PR for this.

Issue Analytics

State:
Created 6 years ago
Reactions:1
Comments:18 (8 by maintainers)

Top GitHub Comments

2reactions

afc163commented, Sep 27, 2017

I see that, you are right, naming of showCheckedStrategy is a little confused.

You can try adding showCheckedItem.

1reaction

zombieJcommented, Aug 2, 2018

@dpradha , Good point. I agree the maxTagCount should support 0 to only provide the maxTagPlaceholder. PR is welcome : )

Top Results From Across the Web

TreeSelect - Ant Design

Property Description Default allowClear Whether allow clear false bordered Whether has border style true defaultValue To set the initial selected treeNode(s) ‑

Vue-Treeselect

A multi-select component with nested options support for Vue.js.

Search Ant Design Tree Select by Title - Stack Overflow

Just to elaborate on the answer provided by @Oliver, you can add the following props: <TreeSelect showSearch treeNodeFilterProp='title' ...

TreeSelect | Block Editor Handbook

TreeSelect component is used to generate select input fields. ... If this property is added, a label will be generated using label property...

Angular PrimeNG Form TreeSelect Multiple Component

</p-treeSelect>. Creating Angular Application and Installing the Module: Step 1: Create an Angular application using the following command.