{"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<h4>Select</h4>\n<p>If you don&apos;t expect the user-entered values &#x200B;&#x200B;to take effect but just select, use Select. You can also use Select&apos;s showSearch property to filter.</p>\n<h3 id=\"Auto Complete\">AutoComplete <a class=\"header-anchor scroll-count-item\" href=\"#Auto Complete\" data-scroll-id=\"Auto Complete\">#</a></h3>\n<p>AutoComplete retains the values &#x200B;&#x200B;entered by the user, essentially the Input component, which extends the capabilities of autocomplete, so the properties of the Input component can be passed directly.</p>\n<h3 id=\"Common Problem\">common problem <a class=\"header-anchor scroll-count-item\" href=\"#Common Problem\" data-scroll-id=\"Common Problem\">#</a></h3>\n<h4>There is a similar warning for <code>flatternChildren</code></h4>\n<p>Select uses <code>value</code> as the key of the menu item by default. If the key value is not set, the default sequence index is used as the key value to ensure that these values &#x200B;&#x200B;do not duplicate.</p>\n<h4>Use of dataSource</h4>\n<p>Select supports both children and dataSource as the data source in the props. If set at the same time, children will prevail.</p>\n<p>Note: 1. Select uses <code>value</code> as the <code>key</code> value of the rendered menu item by default, so <code>value</code> cannot be repeated, otherwise the drop-down menu cannot be rendered. 2. Value does not allow null/undefined/object/array type values</p>\n<ol>\n<li>The way <code>children</code></li>\n</ol>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token operator\">&lt;</span>Select<span class=\"token operator\">&gt;</span>\n    <span class=\"token operator\">&lt;</span>Select<span class=\"token punctuation\">.</span>Option value<span class=\"token operator\">=</span><span class=\"token string\">&quot;option1&quot;</span><span class=\"token operator\">&gt;</span>option1<span class=\"token operator\">&lt;</span><span class=\"token operator\">/</span>Select<span class=\"token punctuation\">.</span>Option<span class=\"token operator\">&gt;</span>\n    <span class=\"token operator\">&lt;</span>Select<span class=\"token punctuation\">.</span>Option value<span class=\"token operator\">=</span><span class=\"token string\">&quot;option2&quot;</span><span class=\"token operator\">&gt;</span>option2<span class=\"token operator\">&lt;</span><span class=\"token operator\">/</span>Select<span class=\"token punctuation\">.</span>Option<span class=\"token operator\">&gt;</span>\n    <span class=\"token operator\">&lt;</span>Select<span class=\"token punctuation\">.</span>Option disabled<span class=\"token operator\">&gt;</span>disabled<span class=\"token operator\">&lt;</span><span class=\"token operator\">/</span>Select<span class=\"token punctuation\">.</span>Option<span class=\"token operator\">&gt;</span>\n<span class=\"token operator\">&lt;</span><span class=\"token operator\">/</span>Select<span class=\"token operator\">&gt;</span>\n</code></pre>\n<ol start=\"2\">\n<li>The way <code>props</code></li>\n</ol>\n<pre class=\"language-jsx\"><code class=\"language-jsx\"><span class=\"token keyword\">const</span> dataSource <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span>\n    <span class=\"token punctuation\">{</span><span class=\"token literal-property property\">label</span><span class=\"token operator\">:</span><span class=\"token string\">&apos;option1&apos;</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span><span class=\"token string\">&apos;option1&apos;</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    <span class=\"token punctuation\">{</span><span class=\"token literal-property property\">label</span><span class=\"token operator\">:</span><span class=\"token string\">&apos;option2&apos;</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span><span class=\"token string\">&apos;option2&apos;</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    <span class=\"token punctuation\">{</span><span class=\"token literal-property property\">label</span><span class=\"token operator\">:</span><span class=\"token string\">&apos;disabled&apos;</span><span class=\"token punctuation\">,</span> <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>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">Select</span></span> <span class=\"token attr-name\">dataSource</span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=</span><span class=\"token punctuation\">{</span>dataSource<span class=\"token punctuation\">}</span></span><span class=\"token punctuation\">/&gt;</span></span>\n</code></pre>\n<h4>Customize Popup Layer</h4>\n<p>See the <code>Embedded layer customization</code> in the example. The only thing to notice is that the elements of <code>overlay</code> remember to pass through props.\nThis is because the layer&apos;s animation of the overlay is implemented by <code>className</code>. If you don&apos;t pass props, you will not be able to listen to the end of the animation.</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=\"Select\">Select <a class=\"header-anchor scroll-count-item\" href=\"#Select\" data-scroll-id=\"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>size</td>\n<td>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>children</td>\n<td>Child elements, reference the demo for details</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>name</td>\n<td>Name</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>value</td>\n<td>Current value, for controlled mode</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>Initial default value</td>\n<td>DataSourceItem | DataSourceItem[]</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>Placeholder when no value</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>autoWidth</td>\n<td>Whether the width of the drop</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>hasClear</td>\n<td>Whether to have a clear button (valid in single mode)</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>state</td>\n<td>Validation status</td>\n<td>&apos;error&apos; | &apos;loading&apos; | &apos;success&apos; | &apos;warning&apos;</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>readOnly</td>\n<td>Whether it is read-only, read-only mode can expand the pop</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>Whether to disable the selector</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>visible</td>\n<td>Whether the pop</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>defaultVisible</td>\n<td>Whether the pop</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 pop</td>\n<td>(visible: boolean, type?: VisibleChangeType) =&gt; void</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>popupContainer</td>\n<td>Popup mounting container</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>popupClassName</td>\n<td>Popup class name</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>popupStyle</td>\n<td>Popup inline style</td>\n<td>React.CSSProperties</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>popupProps</td>\n<td>Props added to the popup</td>\n<td>React.ComponentPropsWithRef&lt;typeof Popup&gt;</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>followTrigger</td>\n<td>Whether to follow the trigger scroll</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>popupContent</td>\n<td>Custom popup content</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>menuProps</td>\n<td>Menu property</td>\n<td>MenuProps</td>\n<td>-</td>\n<td></td>\n<td>1.18</td>\n</tr>\n<tr>\n<td>filterLocal</td>\n<td>Use local filtering, when the data source is remote, you need to close this item</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>filter</td>\n<td>Local filtering method, return a Boolean value to determine whether to retain<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>key</em>: Search keyword<br><em>item</em>: Render node item</td>\n<td>(key: string | number, item: ObjectItem) =&gt; boolean</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onToggleHighlightItem</td>\n<td>Callback when pressing keyboard up and down keys to switch the menu highlight option</td>\n<td>(<br> highlightKey?: string | boolean | NormalizedObjectItem | null,<br> type?: HighlightChangeType<br> ) =&gt; void</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>useVirtual</td>\n<td>Whether to enable virtual scrolling mode</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>dataSource</td>\n<td>Data source, can dynamically render child items</td>\n<td>Array&lt;DataSourceItem&gt;</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>itemRender</td>\n<td>Render MenuItem content method<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>item</em>: item<br><em>searchValue</em>: searchValue</td>\n<td>(item: ObjectItem, searchValue: string | undefined) =&gt; React.ReactNode</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>mode</td>\n<td>Select mode</td>\n<td>&apos;single&apos; | &apos;multiple&apos; | &apos;tag&apos;</td>\n<td>&apos;single&apos;</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>notFoundContent</td>\n<td>Popup content is empty text</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>Callback when Select changes<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>value</em>: value<br><em>actionType</em>: actionType<br><em>item</em>: item</td>\n<td>(<br> value: DataSourceItem | DataSourceItem[],<br> actionType: string,<br> item?: ObjectItem | ObjectItem[]<br> ) =&gt; void</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>hasBorder</td>\n<td>Whether there is a border</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>hasArrow</td>\n<td>Whether there is a drop</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>showSearch</td>\n<td>Whether it can be searched after expansion (fixed in tag mode)</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>autoClearSearchValue</td>\n<td>Whether to clear the search box after selecting the selected item, only in mode multiple or tags is valid</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onSearch</td>\n<td>Callback when the search box value changes</td>\n<td>(value: string, e: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; void</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onSearchClear</td>\n<td>Callback when the search box value is cleared</td>\n<td>(actionType?: string) =&gt; void</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>hasSelectAll</td>\n<td>Whether there is a full selection function in multi</td>\n<td>boolean | string</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>fillProps</td>\n<td>The key to fill in the value of the selection box</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>useDetailValue</td>\n<td>OnChange returns the value using the object of dataSource</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>cacheValue</td>\n<td>Whether to retain the selected content when the dataSource changes</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>valueRender</td>\n<td>Custom rendering Select selected value effects</td>\n<td>(item: ObjectItem, props?: SelectProps) =&gt; React.ReactNode</td>\n<td>item =&gt; <code>item.label \\|\\| item.value</code></td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>searchValue</td>\n<td>Controlled search value, generally does not need to set</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>tagInline</td>\n<td>Whether it is displayed on one line, only in mode multiple</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>maxTagCount</td>\n<td>Maximum number of tags to display</td>\n<td>number</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>adjustTagSize</td>\n<td>Whether the tag size is consistent with the select size, only in multiple/tag mode</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>1.24</td>\n</tr>\n<tr>\n<td>maxTagPlaceholder</td>\n<td>Content to display when hidden excess tags<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>selectedValues</em>: Selected Value<br><em>totalValues</em>: Total Value</td>\n<td>(<br> selectedValues: ObjectItem[],<br> totalValues: ObjectItem[]<br> ) =&gt; React.ReactNode | HTMLElement</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>hiddenSelected</td>\n<td>Whether to hide the menu immediately after selection (effective in mode multiple/tag)</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>showDataSourceChildren</td>\n<td>Whether to show children in dataSource</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onRemove</td>\n<td>Callback when tag is deleted</td>\n<td>(item: ObjectItem) =&gt; void</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onFocus</td>\n<td>Callback when Select gets focus</td>\n<td>(e: React.FocusEvent&lt;HTMLInputElement&gt;) =&gt; void</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onBlur</td>\n<td>Callback when Select loses focus</td>\n<td>(e: React.FocusEvent&lt;HTMLInputElement&gt;) =&gt; void</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onKeyDown</td>\n<td>Callback when Select triggers keyboard events</td>\n<td>(e: React.KeyboardEvent&lt;HTMLElement&gt;) =&gt; void</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>isPreview</td>\n<td>Whether it is a preview state</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>renderPreview</td>\n<td>Render preview content<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>values</em>: Value<br><em>props</em>: Props</td>\n<td>(<br> values: DataSourceItem | DataSourceItem[],<br> props?: SelectProps<br> ) =&gt; React.ReactNode</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>autoHighlightFirstItem</td>\n<td>Automatically highlight the first option</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>highlightKey</td>\n<td>Highlight key</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>defaultHighlightKey</td>\n<td>Default highlight key</td>\n<td>string | null</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>popupAutoFocus</td>\n<td>Whether to automatically focus to the popup when expanding the drop</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>popupComponent</td>\n<td>Component used to render the popup</td>\n<td>React.FunctionComponent | React.ComponentClass | string</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>tagClosable</td>\n<td>Whether tag can be closed</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n<td>1.20</td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Select Auto Complete\">Select.AutoComplete <a class=\"header-anchor scroll-count-item\" href=\"#Select Auto Complete\" data-scroll-id=\"Select Auto Complete\">#</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</tr>\n</thead>\n<tbody>\n<tr>\n<td>size</td>\n<td>Size</td>\n<td>&apos;small&apos; | &apos;medium&apos; | &apos;large&apos;</td>\n<td>&apos;medium&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>value</td>\n<td>Current value, for controlled mode</td>\n<td>string | number | null</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>defaultValue</td>\n<td>Initial default value</td>\n<td>string | number</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>Placeholder when no value</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>autoWidth</td>\n<td>Whether the width of the drop</td>\n<td>boolean</td>\n<td>true</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</tr>\n<tr>\n<td>hasClear</td>\n<td>Whether to have a clear button (valid in single mode)</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>state</td>\n<td>Validation status</td>\n<td>&apos;error&apos; | &apos;loading&apos; | &apos;success&apos; | &apos;warning&apos;</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>readOnly</td>\n<td>Read</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>Whether to disable the selector</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>visible</td>\n<td>Whether the pop</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>defaultVisible</td>\n<td>Whether the pop</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onVisibleChange</td>\n<td>Callback when the pop</td>\n<td>(visible: boolean, type?: VisibleChangeType) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>popupContainer</td>\n<td>Popup mounting container</td>\n<td>string | HTMLElement | ((target: HTMLElement) =&gt; HTMLElement)</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>popupClassName</td>\n<td>Popup class name</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>popupStyle</td>\n<td>Popup inline style</td>\n<td>React.CSSProperties</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>popupProps</td>\n<td>Props added to the popup</td>\n<td>React.ComponentPropsWithRef&lt;typeof Popup&gt;</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>popupContent</td>\n<td>Custom popup content</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>followTrigger</td>\n<td>Whether to follow the trigger scroll</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>filterLocal</td>\n<td>Use local filtering, when the data source is remote, you need to close this item</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n</tr>\n<tr>\n<td>filter</td>\n<td>Local filtering method, return a Boolean value to determine whether to retain</td>\n<td>(key: string | number, item: ObjectItem) =&gt; boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onToggleHighlightItem</td>\n<td>Callback when pressing keyboard up and down keys to switch the menu highlight option</td>\n<td>(<br> highlightKey?: string | boolean | NormalizedObjectItem | null,<br> type?: HighlightChangeType<br> ) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>useVirtual</td>\n<td>Whether to enable virtual scrolling mode</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>dataSource</td>\n<td>Data source, can dynamically render child items</td>\n<td>Array&lt;DataSourceItem&gt;</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>itemRender</td>\n<td>Render MenuItem content</td>\n<td>(item: ObjectItem) =&gt; React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>Callback when AutoComplete changes</td>\n<td>(value: string, actionType: string, item?: ObjectItem) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onKeyDown</td>\n<td>-</td>\n<td>(e: React.KeyboardEvent&lt;HTMLElement&gt;) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>fillProps</td>\n<td>The key to fill in the value of the selection box</td>\n<td>string</td>\n<td>&apos;value&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>autoHighlightFirstItem</td>\n<td>Automatically highlight the first option</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n</tr>\n<tr>\n<td>highlightKey</td>\n<td>Highlight key</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>defaultHighlightKey</td>\n<td>Default highlight key</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onFocus</td>\n<td>Callback when AutoComplete gets focus</td>\n<td>InputProps[&apos;onFocus&apos;]</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>children</td>\n<td>Child elements, reference the demo for details</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>highlightHolder</td>\n<td>Whether to display the current highlighted option as a placeholder</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Select Option Group\">Select.OptionGroup <a class=\"header-anchor scroll-count-item\" href=\"#Select Option Group\" data-scroll-id=\"Select Option Group\">#</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</tr>\n</thead>\n<tbody>\n<tr>\n<td>label</td>\n<td>Set the text of the group</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Select Option\">Select.Option <a class=\"header-anchor scroll-count-item\" href=\"#Select Option\" data-scroll-id=\"Select Option\">#</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</tr>\n</thead>\n<tbody>\n<tr>\n<td>value</td>\n<td>Option value</td>\n<td>string | number | boolean | null | undefined</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>key</td>\n<td>Option value, priority is lower than value</td>\n<td>React.Key</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>Whether to disable</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>label</td>\n<td>Option label, priority is higher than children</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>children</td>\n<td>Option label</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Object Item\">ObjectItem <a class=\"header-anchor scroll-count-item\" href=\"#Object Item\" data-scroll-id=\"Object Item\">#</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</tr>\n</thead>\n<tbody>\n<tr>\n<td>value</td>\n<td>Option value</td>\n<td>string | number | boolean | null | undefined</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>label</td>\n<td>Option label</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>color</td>\n<td>Option background color, optional values are the same as Tag</td>\n<td>TagProps[&apos;color&apos;]</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>Option is disabled</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>children</td>\n<td>Sub</td>\n<td>DataSourceItem[]</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>title</td>\n<td>Option title</td>\n<td>string | null</td>\n<td>-</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Data Source Item\">DataSourceItem <a class=\"header-anchor scroll-count-item\" href=\"#Data Source Item\" data-scroll-id=\"Data Source Item\">#</a></h3>\n<pre class=\"language-typescript\"><code class=\"language-typescript\"><span class=\"token keyword\">export</span> <span class=\"token keyword\">type</span> <span class=\"token class-name\">DataSourceItem</span> <span class=\"token operator\">=</span> ObjectItem <span class=\"token operator\">|</span> <span class=\"token builtin\">string</span> <span class=\"token operator\">|</span> <span class=\"token builtin\">boolean</span> <span class=\"token operator\">|</span> <span class=\"token builtin\">number</span> <span class=\"token operator\">|</span> <span class=\"token keyword\">null</span> <span class=\"token operator\">|</span> <span class=\"token keyword\">undefined</span><span class=\"token punctuation\">;</span>\n</code></pre>\n<h3 id=\"Visible Change Type\">VisibleChangeType <a class=\"header-anchor scroll-count-item\" href=\"#Visible Change Type\" data-scroll-id=\"Visible Change Type\">#</a></h3>\n<pre class=\"language-typescript\"><code class=\"language-typescript\"><span class=\"token keyword\">export</span> <span class=\"token keyword\">type</span> <span class=\"token class-name\">VisibleChangeType</span> <span class=\"token operator\">=</span>\n    <span class=\"token operator\">|</span> <span class=\"token string\">&apos;itemClick&apos;</span>\n    <span class=\"token operator\">|</span> <span class=\"token string\">&apos;enter&apos;</span>\n    <span class=\"token operator\">|</span> <span class=\"token string\">&apos;esc&apos;</span>\n    <span class=\"token operator\">|</span> <span class=\"token string\">&apos;keyDown&apos;</span>\n    <span class=\"token operator\">|</span> <span class=\"token string\">&apos;selectAll&apos;</span>\n    <span class=\"token operator\">|</span> <span class=\"token string\">&apos;update&apos;</span>\n    <span class=\"token operator\">|</span> <span class=\"token string\">&apos;change&apos;</span>\n    <span class=\"token operator\">|</span> <span class=\"token string\">&apos;tag&apos;</span><span class=\"token punctuation\">;</span>\n</code></pre>\n<h3 id=\"Highlight Change Type\">HighlightChangeType <a class=\"header-anchor scroll-count-item\" href=\"#Highlight Change Type\" data-scroll-id=\"Highlight Change Type\">#</a></h3>\n<pre class=\"language-typescript\"><code class=\"language-typescript\"><span class=\"token keyword\">export</span> <span class=\"token keyword\">type</span> <span class=\"token class-name\">HighlightChangeType</span> <span class=\"token operator\">=</span> <span class=\"token string\">&apos;up&apos;</span> <span class=\"token operator\">|</span> <span class=\"token string\">&apos;down&apos;</span> <span class=\"token operator\">|</span> <span class=\"token string\">&apos;autoFirstItem&apos;</span> <span class=\"token operator\">|</span> <span class=\"token string\">&apos;highlightKeyToNull&apos;</span><span class=\"token punctuation\">;</span>\n</code></pre>\n<h2 id=\"Select Auto Complete Inner Methods Got By Refs\">Select/AutoComplete Inner Methods(Got by refs) <a class=\"header-anchor scroll-count-item\" href=\"#Select Auto Complete Inner Methods Got By Refs\" data-scroll-id=\"Select Auto Complete Inner Methods Got By Refs\">#</a></h2>\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>focus</td>\n<td>get foucs<br><br><strong>signature</strong>:<br> Function(start:Number, end: Number)<br><strong>params</strong>:<br><em>start</em>: {Number} cursor postion<br><em>end</em>: {Number} select end postion</td>\n<td>Function</td>\n<td></td>\n</tr>\n</tbody>\n</table>\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\">&#x6309;&#x952E;</th>\n<th style=\"text-align:left\">&#x8BF4;&#x660E;</th>\n</tr>\n</thead>\n<tbody>\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</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</td>\n</tr>\n<tr>\n<td style=\"text-align:left\">Enter</td>\n<td style=\"text-align:left\">Open the list or select current item</td>\n</tr>\n<tr>\n<td style=\"text-align:left\">Esc</td>\n<td style=\"text-align:left\">Close the list</td>\n</tr>\n</tbody>\n</table>\n"}