0
# Selection Strategies
1

2
Selection strategies control how selected values are displayed when using checkable trees in multiple selection mode. They determine which tree nodes appear in the selection display when parent-child relationships exist.
3

4
## Capabilities
5

6
### Strategy Constants
7

8
Constants that define how checked values are shown in the selection display.
9

10
```typescript { .api }
11
/** Show all selected nodes including parents and children */
12
const SHOW_ALL: CheckedStrategy;
13

14
/** Show only parent nodes when all children are selected */  
15
const SHOW_PARENT: CheckedStrategy;
16

17
/** Show only leaf nodes (children without further children) */
18
const SHOW_CHILD: CheckedStrategy;
19

20
type CheckedStrategy = 'SHOW_ALL' | 'SHOW_PARENT' | 'SHOW_CHILD';
21
```
22

23
### Using Selection Strategies
24

25
Strategies are applied via the `showCheckedStrategy` prop on TreeSelect.
26

27
```typescript { .api }
28
interface TreeSelectProps {
29
  /** Strategy for displaying selected values in checkable mode */
30
  showCheckedStrategy?: CheckedStrategy;
31
}
32
```
33

34
**Usage Examples:**
35

36
```typescript
37
import TreeSelect, { SHOW_ALL, SHOW_PARENT, SHOW_CHILD } from "rc-tree-select";
38

39
const treeData = [
40
  {
41
    value: "documents",
42
    title: "Documents", 
43
    children: [
44
      { value: "doc1", title: "Resume.pdf" },
45
      { value: "doc2", title: "Cover Letter.docx" },
46
      {
47
        value: "projects",
48
        title: "Projects",
49
        children: [
50
          { value: "project1", title: "Project A" },
51
          { value: "project2", title: "Project B" },
52
        ]
53
      }
54
    ]
55
  },
56
  {
57
    value: "pictures", 
58
    title: "Pictures",
59
    children: [
60
      { value: "pic1", title: "Vacation.jpg" },
61
      { value: "pic2", title: "Profile.png" },
62
    ]
63
  }
64
];
65

66
// SHOW_ALL - Display all selected nodes
67
function ShowAllExample() {
68
  const [value, setValue] = useState([]);
69
  
70
  return (
71
    <TreeSelect
72
      style={{ width: 400 }}
73
      value={value}
74
      treeData={treeData}
75
      multiple
76
      treeCheckable
77
      showCheckedStrategy={SHOW_ALL}
78
      placeholder="Select files (show all)"
79
      onChange={setValue}
80
    />
81
  );
82
  // If user selects: Documents > Resume.pdf, Documents > Projects
83
  // Display shows: "Documents, Resume.pdf, Projects"
84
}
85

86
// SHOW_PARENT - Show only parents when all children selected
87
function ShowParentExample() {
88
  const [value, setValue] = useState([]);
89
  
90
  return (
91
    <TreeSelect
92
      style={{ width: 400 }}
93
      value={value}
94
      treeData={treeData}
95
      multiple
96
      treeCheckable
97
      showCheckedStrategy={SHOW_PARENT}
98
      placeholder="Select files (show parent)"
99
      onChange={setValue}
100
    />
101
  );
102
  // If user selects all items under "Pictures":
103
  // Display shows: "Pictures" (instead of "Vacation.jpg, Profile.png")
104
  
105
  // If user selects only some items under "Pictures":
106
  // Display shows: "Vacation.jpg" (individual selections)
107
}
108

109
// SHOW_CHILD - Show only leaf nodes
110
function ShowChildExample() {
111
  const [value, setValue] = useState([]);
112
  
113
  return (
114
    <TreeSelect
115
      style={{ width: 400 }}
116
      value={value}
117
      treeData={treeData}
118
      multiple
119
      treeCheckable
120
      showCheckedStrategy={SHOW_CHILD}
121
      placeholder="Select files (show children)"
122
      onChange={setValue}
123
    />
124
  );
125
  // If user selects "Documents" folder:
126
  // Display shows: "Resume.pdf, Cover Letter.docx, Project A, Project B"
127
  // Even though parent was selected, only leaf nodes are displayed
128
}
129

130
// Comparing strategies with same selection
131
function StrategyComparisonExample() {
132
  const [strategy, setStrategy] = useState<CheckedStrategy>(SHOW_ALL);
133
  const [value, setValue] = useState([
134
    "doc1", "doc2", "project1", "project2" // All children of "documents"
135
  ]);
136

137
  return (
138
    <div>
139
      <div style={{ marginBottom: 16 }}>
140
        <label>Strategy: </label>
141
        <select 
142
          value={strategy} 
143
          onChange={e => setStrategy(e.target.value as CheckedStrategy)}
144
        >
145
          <option value={SHOW_ALL}>SHOW_ALL</option>
146
          <option value={SHOW_PARENT}>SHOW_PARENT</option>
147
          <option value={SHOW_CHILD}>SHOW_CHILD</option>
148
        </select>
149
      </div>
150
      
151
      <TreeSelect
152
        style={{ width: 400 }}
153
        value={value}
154
        treeData={treeData}
155
        multiple
156
        treeCheckable
157
        showCheckedStrategy={strategy}
158
        placeholder="See strategy differences"
159
        onChange={setValue}
160
      />
161
      
162
      {/* Results with same selection:
163
          SHOW_ALL: "Resume.pdf, Cover Letter.docx, Project A, Project B"
164
          SHOW_PARENT: "Documents" (all children selected)
165
          SHOW_CHILD: "Resume.pdf, Cover Letter.docx, Project A, Project B"
166
      */}
167
    </div>
168
  );
169
}
170
```
171

172
## Strategy Behavior Details
173

174
### SHOW_ALL Behavior
175
- Displays every selected node regardless of parent-child relationships
176
- Most verbose display showing complete selection state
177
- Useful when users need to see exactly what was selected
178

179
### SHOW_PARENT Behavior  
180
- When all children under a parent are selected, shows only the parent
181
- When partial children are selected, shows individual children
182
- Provides the most compact display by grouping complete selections
183
- Ideal for hierarchical selection where parent represents all children
184

185
### SHOW_CHILD Behavior
186
- Always shows only the leaf nodes (nodes without children)
187
- Even if parent is selected, displays the actual selectable end items
188
- Most useful when parent nodes are organizational and only leaves matter
189
- Good for scenarios where parents are just categories
190

191
## Selection State vs Display
192

193
The selection strategies only affect **display** of selected values, not the actual selection state:
194

195
```typescript
196
// The onChange handler receives the complete selection state
197
const handleChange = (value, labelList, extra) => {
198
  console.log('Actual values:', value); // Complete selection including parents
199
  console.log('Display labels:', labelList); // Filtered by strategy
200
  console.log('Strategy applied to display only');
201
};
202

203
// Internal value state remains complete regardless of display strategy
204
```
205

206
## Types
207

208
```typescript { .api }
209
type CheckedStrategy = 'SHOW_ALL' | 'SHOW_PARENT' | 'SHOW_CHILD';
210

211
// Strategy constants
212
declare const SHOW_ALL: 'SHOW_ALL';
213
declare const SHOW_PARENT: 'SHOW_PARENT'; 
214
declare const SHOW_CHILD: 'SHOW_CHILD';
215
```