{"meta":"<h2 id=\"Guide\">Guide <a class=\"header-anchor scroll-count-item\" href=\"#Guide\" data-scroll-id=\"Guide\">#</a></h2>\n<h3 id=\"When To Use\">When To Use <a class=\"header-anchor scroll-count-item\" href=\"#When To Use\" data-scroll-id=\"When To Use\">#</a></h3>\n<p>Like Select, TreeSelect can be used when the selected data structure is a tree structure, such as company hierarchy, subject system, category catalog, and so on.</p>\n","api":"<h2 id=\"API\">API <a class=\"header-anchor scroll-count-item\" href=\"#API\" data-scroll-id=\"API\">#</a></h2>\n<h3 id=\"Tree Select\">TreeSelect <a class=\"header-anchor scroll-count-item\" href=\"#Tree Select\" data-scroll-id=\"Tree Select\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n<th>Supported Version</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>children</td>\n<td>Tree node</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>size</td>\n<td>Select size</td>\n<td>&apos;small&apos; | &apos;medium&apos; | &apos;large&apos;</td>\n<td>&apos;medium&apos;</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>Select placeholder</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>Whether to be disabled</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>hasArrow</td>\n<td>Whether to show the arrow</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>hasBorder</td>\n<td>Whether to show the border</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>hasClear</td>\n<td>Whether to show the clear button</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>label</td>\n<td>Custom inline label</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>readOnly</td>\n<td>Whether to be read-only (read</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>autoWidth</td>\n<td>Whether the drop</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>dataSource</td>\n<td>Data source (higher priority than children)</td>\n<td>DataSourceItem[]</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>value</td>\n<td>Current value (Controlled)</td>\n<td>DataSourceItem[] | DataSourceItem</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>defaultValue</td>\n<td>Default value (Uncontrolled)</td>\n<td>SelectProps[&apos;defaultValue&apos;]</td>\n<td>null</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>preserveNonExistentValue</td>\n<td>Whether to display when value/defaultValue does not exist in dataSource</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>1.25</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>Callback when the selected value changes</td>\n<td>(<br> value: DataSourceItem[] | DataSourceItem,<br> data: ObjectItem[] | ObjectItem | null<br> ) =&gt; void</td>\n<td>() =&gt; {}</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>tagInline</td>\n<td>Whether to display on one line (only effective when multiple and treeCheckable are true)</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>1.25</td>\n</tr>\n<tr>\n<td>maxTagPlaceholder</td>\n<td>Content to display when hiding excess tags (effective when tagInline is true)<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>selectedValues</em>: Selected element<br><em>totalValues</em>: Total pending element, treeCheckedStrategy = &apos;parent&apos; is undefined<br><strong>return</strong>:<br>ReactNode or HTMLElement</td>\n<td>(<br> selectedValues: ObjectItem[],<br> totalValues?: ObjectItem[]<br> ) =&gt; React.ReactNode | HTMLElement</td>\n<td>-</td>\n<td></td>\n<td>1.25</td>\n</tr>\n<tr>\n<td>autoClearSearch</td>\n<td>Whether to automatically clear searchValue</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n<td>1.26</td>\n</tr>\n<tr>\n<td>showSearch</td>\n<td>Whether to show the search box</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onSearch</td>\n<td>Callback when input in search box changes</td>\n<td>(keyword: string) =&gt; void</td>\n<td>() =&gt; {}</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>notFoundContent</td>\n<td>Content to display when there is no data</td>\n<td>React.ReactNode</td>\n<td>&apos;Not Found&apos;</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>multiple</td>\n<td>Whether to support multiple selection</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>treeCheckable</td>\n<td>Whether the check box of the tree in the drop</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>treeCheckStrictly</td>\n<td>Whether the check box of the tree in the drop-down box is completely controlled (the parent</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>treeCheckedStrategy</td>\n<td>Definition of how to fill in when selected</td>\n<td>&apos;all&apos; | &apos;parent&apos; | &apos;child&apos;</td>\n<td>&apos;parent&apos;</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>treeDefaultExpandAll</td>\n<td>Whether the tree in the drop</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>treeDefaultExpandedKeys</td>\n<td>The array of keys of the nodes expanded by default in the tree in the drop</td>\n<td>Array&lt;Key&gt;</td>\n<td>[]</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>treeLoadData</td>\n<td>The function of asynchronous loading data in the tree in the drop</td>\n<td>TreeProps[&apos;loadData&apos;]</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>treeProps</td>\n<td>Pass</td>\n<td>TreeProps</td>\n<td>{}</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>defaultVisible</td>\n<td>Initial display state of the drop</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>visible</td>\n<td>Current display state of the drop</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onVisibleChange</td>\n<td>Callback when the drop</td>\n<td>(visible: boolean, type: string) =&gt; void</td>\n<td>() =&gt; {}</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>popupStyle</td>\n<td>Custom style object for the drop</td>\n<td>React.CSSProperties</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>popupClassName</td>\n<td>Custom class name for the drop</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>popupContainer</td>\n<td>Mounting container node for the drop</td>\n<td>string | HTMLElement | ((target: HTMLElement) =&gt; HTMLElement)</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>popupProps</td>\n<td>Pass</td>\n<td>PopupProps</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>followTrigger</td>\n<td>Whether to follow scrolling</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>isPreview</td>\n<td>Whether it is in preview mode</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>renderPreview</td>\n<td>Content rendered in preview mode</td>\n<td>(data: ObjectItem[], props: TreeSelectProps) =&gt; React.ReactNode</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>useVirtual</td>\n<td>Whether to open virtual scrolling</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>filterLocal</td>\n<td>Whether to close local search</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>immutable</td>\n<td>Whether it is immutable data</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n<td>1.23</td>\n</tr>\n<tr>\n<td>clickToCheck</td>\n<td>Whether clicking on the text can be selected</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>valueRender</td>\n<td>Method for rendering Select area display content<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>item</em>: Extra item<br><em>itemPaths</em>: Extra item path<br><strong>return</strong>:<br>Display content</td>\n<td>(item: TreeSelectState[&apos;_k2n&apos;][Key], itemPaths: ObjectItem[]) =&gt; React.ReactNode</td>\n<td>(item) =&gt; item.label || item.value</td>\n<td></td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<!-- api-extra-start -->\n<h3 id=\"Tree Select Node\">TreeSelect.Node <a class=\"header-anchor scroll-count-item\" href=\"#Tree Select Node\" data-scroll-id=\"Tree Select Node\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Descripiton</th>\n<th>Type</th>\n<th>Default Value</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>children</td>\n<td>tree nodes</td>\n<td>ReactNode</td>\n<td>-</td>\n</tr>\n<tr>\n<td>label</td>\n<td>content of node</td>\n<td>ReactNode</td>\n<td>&apos;---&apos;</td>\n</tr>\n<tr>\n<td>selectable</td>\n<td>set whether to support selecting node, override the Tree&apos;s selectable</td>\n<td>Boolean</td>\n<td>-</td>\n</tr>\n<tr>\n<td>checkable</td>\n<td>set whether to support checking node, override the Tree&apos;s checkable</td>\n<td>Boolean</td>\n<td>-</td>\n</tr>\n<tr>\n<td>editable</td>\n<td>set whether to support editing node, override the Tree&apos;s editable</td>\n<td>Boolean</td>\n<td>-</td>\n</tr>\n<tr>\n<td>draggable</td>\n<td>set whether to support dragging node, override the Tree&apos;s draggable</td>\n<td>Boolean</td>\n<td>-</td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>whether node is disabled</td>\n<td>Boolean</td>\n<td>false</td>\n</tr>\n<tr>\n<td>checkboxDisabled</td>\n<td>whether checkbox of node is disabled</td>\n<td>Boolean</td>\n<td>false</td>\n</tr>\n<tr>\n<td>isLeaf</td>\n<td>whether it is a leaf node and only works when loadData is set</td>\n<td>Boolean</td>\n<td>false</td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Data Structure Of Data Source\">Data structure of dataSource <a class=\"header-anchor scroll-count-item\" href=\"#Data Structure Of Data Source\" data-scroll-id=\"Data Structure Of Data Source\">#</a></h3>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">const</span> dataSource <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span>\n    <span class=\"token punctuation\">{</span>\n        <span class=\"token literal-property property\">label</span><span class=\"token operator\">:</span> <span class=\"token string\">&apos;A&apos;</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">&apos;1&apos;</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">key</span><span class=\"token operator\">:</span> <span class=\"token string\">&apos;1&apos;</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">selectable</span><span class=\"token operator\">:</span> <span class=\"token boolean\">false</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">children</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n            <span class=\"token punctuation\">{</span>\n                <span class=\"token literal-property property\">label</span><span class=\"token operator\">:</span> <span class=\"token string\">&apos;AA&apos;</span><span class=\"token punctuation\">,</span>\n                <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">&apos;2&apos;</span><span class=\"token punctuation\">,</span>\n                <span class=\"token literal-property property\">key</span><span class=\"token operator\">:</span> <span class=\"token string\">&apos;2&apos;</span><span class=\"token punctuation\">,</span>\n                <span class=\"token literal-property property\">children</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n                    <span class=\"token punctuation\">{</span>\n                        <span class=\"token literal-property property\">label</span><span class=\"token operator\">:</span> <span class=\"token string\">&apos;AAA&apos;</span><span class=\"token punctuation\">,</span>\n                        <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">&apos;4&apos;</span><span class=\"token punctuation\">,</span>\n                        <span class=\"token literal-property property\">key</span><span class=\"token operator\">:</span> <span class=\"token string\">&apos;4&apos;</span><span class=\"token punctuation\">,</span>\n                        <span class=\"token literal-property property\">disableCheckbox</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n                    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n                    <span class=\"token punctuation\">{</span>\n                        <span class=\"token literal-property property\">label</span><span class=\"token operator\">:</span> <span class=\"token string\">&apos;AAB&apos;</span><span class=\"token punctuation\">,</span>\n                        <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">&apos;5&apos;</span><span class=\"token punctuation\">,</span>\n                        <span class=\"token literal-property property\">key</span><span class=\"token operator\">:</span> <span class=\"token string\">&apos;5&apos;</span><span class=\"token punctuation\">,</span>\n                        <span class=\"token literal-property property\">disabled</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n                    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n                <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n            <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n            <span class=\"token punctuation\">{</span>\n                <span class=\"token literal-property property\">label</span><span class=\"token operator\">:</span> <span class=\"token string\">&apos;AB&apos;</span><span class=\"token punctuation\">,</span>\n                <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">&apos;3&apos;</span><span class=\"token punctuation\">,</span>\n                <span class=\"token literal-property property\">key</span><span class=\"token operator\">:</span> <span class=\"token string\">&apos;3&apos;</span><span class=\"token punctuation\">,</span>\n                <span class=\"token literal-property property\">children</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n                    <span class=\"token punctuation\">{</span>\n                        <span class=\"token literal-property property\">label</span><span class=\"token operator\">:</span> <span class=\"token string\">&apos;ABA&apos;</span><span class=\"token punctuation\">,</span>\n                        <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">&apos;6&apos;</span><span class=\"token punctuation\">,</span>\n                        <span class=\"token literal-property property\">key</span><span class=\"token operator\">:</span> <span class=\"token string\">&apos;6&apos;</span><span class=\"token punctuation\">,</span>\n                    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n                <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n            <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n</code></pre>\n<p>If you do not pass the key, TreeSelect will use the internally calculated position string as the key. If you want to set an property such as treeDefaultExpandedKeys, pass the custom key. It&apos;s a good way that make the key same as the value.</p>\n<!-- api-extra-end -->\n<h2 id=\"ARIA And Key Board\">ARIA and KeyBoard <a class=\"header-anchor scroll-count-item\" href=\"#ARIA And Key Board\" data-scroll-id=\"ARIA And Key Board\">#</a></h2>\n<table>\n<thead>\n<tr>\n<th style=\"text-align:left\">KeyBoard</th>\n<th style=\"text-align:left\">Descripiton</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td style=\"text-align:left\">Enter</td>\n<td style=\"text-align:left\">Open the selection tree or select the current item</td>\n</tr>\n<tr>\n<td style=\"text-align:left\">Up Arrow</td>\n<td style=\"text-align:left\">Get the previous item focus of the current item of same level</td>\n</tr>\n<tr>\n<td style=\"text-align:left\">Down Arrow</td>\n<td style=\"text-align:left\">Get the next item focus of the current item of same level</td>\n</tr>\n<tr>\n<td style=\"text-align:left\">Right Arrow</td>\n<td style=\"text-align:left\">Open the next subtree of the current element and focus on the first item</td>\n</tr>\n<tr>\n<td style=\"text-align:left\">Left Arrow</td>\n<td style=\"text-align:left\">Return to the parent node of the current element and close the current subtree</td>\n</tr>\n</tbody>\n</table>\n"}