diff --git a/src/cascader/Cascader.tsx b/src/cascader/Cascader.tsx
index 71f199a8db..99e387ad27 100644
--- a/src/cascader/Cascader.tsx
+++ b/src/cascader/Cascader.tsx
@@ -73,9 +73,14 @@ export const Cascader: React.FC<CascaderProps> = ({
     e.stopPropagation();
   };
 
-  const renderTrigger = () => {
+  const triggerClick = () => !disabled && setVisible(!visible);
+  // trigger
+  const renderTrigger = (): React.ReactElement => {
     if (typeof propsRenderTrigger === 'function') {
-      return propsRenderTrigger?.();
+      const node = propsRenderTrigger?.();
+      return React.cloneElement(node, {
+        onClick: triggerClick,
+      });
     }
     return (
       <Trigger
@@ -90,7 +95,7 @@ export const Cascader: React.FC<CascaderProps> = ({
         disabled={disabled}
         allowClear={allowClear}
         onClear={handleOnClear}
-        onClick={() => !disabled && setVisible(!visible)}
+        onClick={triggerClick}
         onInputChange={(val) => {
           isEmpty(val) && handleChange();
         }}
diff --git a/src/cascader/interfance.ts b/src/cascader/interfance.ts
index 947b3c3483..7886ee2c13 100644
--- a/src/cascader/interfance.ts
+++ b/src/cascader/interfance.ts
@@ -65,6 +65,7 @@ export interface OptionProps extends ListOptionProps {
   value: string;
   childrens?: OptionProps[];
 }
+
 export interface TriggerProps extends Omit<InputButtonProps, 'value' | 'active'> {
   value?: string;
 }
diff --git a/src/input/style/InputButton.less b/src/input/style/InputButton.less
index eb4dbf1688..d35d42eaed 100644
--- a/src/input/style/InputButton.less
+++ b/src/input/style/InputButton.less
@@ -4,53 +4,51 @@
 @input-btn-prefix-cls: ~'@{component-prefix}-input-btn';
 @icon-prefix-cls: ~'@{component-prefix}-input__prefix';
 
-@input-btn-input-prefix-cls: ~'@{component-prefix}-input-btn__input';
+@input-btn-input-prefix-cls: ~'@{component-prefix}-input-btn';
 
-.@{input-btn-prefix-cls} {
+.@{input-btn-input-prefix-cls} {
+  input {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  background-color: @gray-0;
   cursor: pointer;
-  .@{input-btn-input-prefix-cls} {
-    input {
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-    background-color: @gray-0;
-    cursor: pointer;
 
-    &:not([disabled])::placeholder {
-      color: @gray-5;
+  &:not([disabled])::placeholder {
+    color: @gray-5;
+    .text-body1();
+  }
+  &:disabled {
+    color: @gray-3;
+    background-color: @gray-0;
+    &::placeholder {
+      color: @gray-3;
       .text-body1();
     }
-    &:disabled {
+    &:hover {
       color: @gray-3;
       background-color: @gray-0;
       &::placeholder {
         color: @gray-3;
-        .text-body1();
-      }
-      &:hover {
-        color: @gray-3;
-        background-color: @gray-0;
-        &::placeholder {
-          color: @gray-3;
-        }
       }
     }
+  }
 
-    &:not([disabled]):hover {
-      color: @blue-3;
-      border: 1px solid @gray-2;
-    }
-    &:is([disabled]):hover {
-      color: @gray-3;
-      border: 1px solid @gray-2;
-    }
+  &:not([disabled]):hover {
+    color: @blue-3;
+    border: 1px solid @gray-2;
+  }
+  &:is([disabled]):hover {
+    color: @gray-3;
+    border: 1px solid @gray-2;
+  }
 
-    &:not([disabled]):focus {
-      border: 1px solid @gray-2;
-      outline: none;
-    }
+  &:not([disabled]):focus {
+    border: 1px solid @gray-2;
+    outline: none;
   }
+
   &__active,
   &__hover {
     &:hover {
diff --git a/src/list-picker/Recent.tsx b/src/list-picker/Recent.tsx
index 3e81624305..460cb6c0ce 100644
--- a/src/list-picker/Recent.tsx
+++ b/src/list-picker/Recent.tsx
@@ -11,7 +11,7 @@ interface RecentProps {
 }
 
 const Recent: React.FC<RecentProps> & { isRecent: boolean } = (props) => {
-  const { max = 5, title } = props;
+  const { max = 5, title = '最近使用' } = props;
   const context = useContext(ListContext);
   const localStorageValue = window?.localStorage?.getItem(ITEM_KEY) || '[]';
   const matchValue = JSON.parse(localStorageValue); // localStorage.getItem('__GIO_SELECTION_KEY')
diff --git a/src/list-picker/Trigger.tsx b/src/list-picker/Trigger.tsx
index 04dfb7e15a..491467ca7a 100644
--- a/src/list-picker/Trigger.tsx
+++ b/src/list-picker/Trigger.tsx
@@ -1,16 +1,53 @@
-import React from 'react';
+import React, { useContext, useMemo } from 'react';
 import Input from '../input';
+import { ListContext } from '../list/context';
+import { collectOptions } from '../list/util';
 import WithRef from '../utils/withRef';
 import { TriggerProps } from './interfance';
 
 const Trigger: React.ForwardRefRenderFunction<HTMLInputElement, TriggerProps> = (props, ref) => {
-  const { value, placeholder, onClear, ...rest } = props;
+  const {
+    value,
+    title,
+    placeholder,
+    onClear,
+    children,
+    hidePrefix = false,
+    prefix: propPrefix,
+    suffix: propSuffix,
+    ...rest
+  } = props;
+  const { options, setOptions, getOptionByValue, getLabelByValue } = useContext(ListContext);
+  setOptions?.(collectOptions(children));
+
   const handleClear = (e: React.MouseEvent<Element, MouseEvent>) => {
     onClear?.(e);
     e.stopPropagation();
   };
+
+  const prefix = useMemo(() => {
+    if (!hidePrefix) {
+      return propPrefix ?? getOptionByValue?.(value as string)?.prefix;
+    }
+    return undefined;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [options?.size, hidePrefix, propPrefix, value]);
+
+  const suffix = useMemo(
+    () => propSuffix ?? getOptionByValue?.(value as string)?.suffix,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [options?.size, hidePrefix, propPrefix, value]
+  );
   return (
-    <Input.Button ref={ref} placeholder={placeholder} value={(value as string) ?? ''} onClear={handleClear} {...rest} />
+    <Input.Button
+      ref={ref}
+      prefix={prefix}
+      suffix={suffix}
+      placeholder={placeholder}
+      value={title ?? getLabelByValue?.(value as string)}
+      onClear={handleClear}
+      {...rest}
+    />
   );
 };
 
diff --git a/src/list-picker/demos/List-picker.stories.tsx b/src/list-picker/demos/List-picker.stories.tsx
index 142804aa63..99b4a3cddc 100644
--- a/src/list-picker/demos/List-picker.stories.tsx
+++ b/src/list-picker/demos/List-picker.stories.tsx
@@ -2,11 +2,11 @@ import React, { useState } from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';
 import '../style';
 import { isEqual, uniqueId } from 'lodash';
+// import { UserOutlined } from '@gio-design/icons';
 import CheckboxItem from '../../list/inner/CheckboxItem';
 import { OptionProps } from '../../list/interfance';
 // import { uniqueId } from 'lodash';
 // import { uniqBy, uniqueId } from 'lodash';
-// import { AttributionPropertyOutlined, EditOutlined, ItemOutlined, TagOutlined, UserOutlined } from '@gio-design/icons';
 import { ListPickerProps } from '../interfance';
 import ListPicker from '../listPicker';
 import SearchBar from '../../search-bar';
@@ -47,7 +47,7 @@ const createSingleOption = (index: number) => ({
 const largeOptions = new Array(200).fill(0).map((v, i) => createOption(i));
 const simpleLargeOptions = new Array(200).fill(0).map((v, i) => createSingleOption(i));
 const Template: Story<ListPickerProps> = () => {
-  const [value, setValue] = useState<undefined | string>('banana');
+  const [value, setValue] = useState<undefined | string>('ziyi');
   const [multipleValue, setMultipleValue] = useState<undefined | string[]>(undefined);
   const [activeTab, setActiveTab] = useState('tab1');
   const [search, setSearch] = useState('');
@@ -238,11 +238,7 @@ const Template: Story<ListPickerProps> = () => {
               <Tab label="tab1" value="tab1">
                 <List.Selection>
                   {(context) => {
-                    const isEqualValue = isEqual(
-                      Array.from(context.options.values()).reduce((p, v) => [...p, v.value], []),
-                      context.value
-                    );
-                    console.log(isEqualValue);
+                    const isEqualValue = context.value.length === 2;
                     return (
                       <>
                         <CheckboxItem
@@ -370,6 +366,7 @@ const Template: Story<ListPickerProps> = () => {
             <List.Selection options={largeOptions} />
           </ListPicker>
         </div>
+        <div className="demo-box" />
       </div>
     </div>
   );
diff --git a/src/list-picker/interfance.ts b/src/list-picker/interfance.ts
index 0334aa1148..2e46504129 100644
--- a/src/list-picker/interfance.ts
+++ b/src/list-picker/interfance.ts
@@ -86,4 +86,5 @@ export interface TriggerProps extends Omit<InputButtonProps, 'value' | 'active'>
   disabled?: boolean;
   value?: string | React.ReactNode;
   separator?: string;
+  [key: string]: any;
 }
diff --git a/src/list-picker/listPicker.tsx b/src/list-picker/listPicker.tsx
index e1b56ce539..aa1c9213c6 100644
--- a/src/list-picker/listPicker.tsx
+++ b/src/list-picker/listPicker.tsx
@@ -1,6 +1,6 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import classNames from 'classnames';
-import { isEqual, isNil, isString } from 'lodash';
+import { isEqual, isNil } from 'lodash';
 import { ListPickerProps } from './interfance';
 import Popover from '../popover';
 import Trigger from './Trigger';
@@ -42,7 +42,7 @@ const ListPicker: React.FC<ListPickerProps> = (props) => {
     needConfim = model === 'multiple',
 
     allowClear,
-    title: controlledTitle,
+    title,
     triggerPrefix,
     triggerSuffix,
     hidePrefix = false,
@@ -50,21 +50,10 @@ const ListPicker: React.FC<ListPickerProps> = (props) => {
   } = props;
   const defaultPrefix = usePrefixCls(prefixCls);
   const [visible, setVisible] = useControlledState(controlledVisible, false);
-  const [value, setValue] = useState(controlledValue || defaultValue);
-  const [title, setTitle] = useState<string | React.ReactNode>(controlledTitle);
-  const [titlePrefix, setTitlePrefix] = useState<string | React.ReactNode>(undefined);
-  const { options, setOptions, getLabelByValue, getOptionByValue, getOptionsByValue } = useCacheOptions();
 
-  // title仅跟随controlledValue变动
-  useEffect(() => {
-    setTitle(getLabelByValue(controlledValue, separator));
-  }, [controlledValue, getLabelByValue, separator, setTitle]);
-  // prefix
-  useEffect(() => {
-    if (model === 'single' && isString(controlledValue) && !hidePrefix) {
-      setTitlePrefix(triggerPrefix ?? getOptionByValue(controlledValue)?.prefix);
-    }
-  }, [controlledValue, getOptionByValue, hidePrefix, model, triggerPrefix]);
+  const [value, setValue] = useControlledState(controlledValue, defaultValue);
+  const { options, setOptions, getOptionByValue, getLabelByValue, getOptionsByValue } = useCacheOptions();
+
   useEffect(() => {
     setValue(controlledValue);
   }, [controlledValue, setValue]);
@@ -101,27 +90,35 @@ const ListPicker: React.FC<ListPickerProps> = (props) => {
     setValue(undefined);
     onClear?.();
   };
+  const triggerClick = () => !disabled && setVisible(!visible);
   // trigger
   const renderTrigger = (): React.ReactElement => {
     if (typeof propsRenderTrigger === 'function') {
-      return propsRenderTrigger?.();
+      const node = propsRenderTrigger?.();
+      return React.cloneElement(node, {
+        onClick: triggerClick,
+      });
     }
     return (
       <Trigger
         size={size}
-        value={controlledTitle ?? title}
+        value={controlledValue}
         style={style}
         className={className}
         maxWidth={maxWidth}
         disabled={disabled}
         placeholder={placeholder}
         suffix={triggerSuffix}
-        prefix={titlePrefix}
+        prefix={triggerPrefix}
         allowClear={allowClear}
         onClear={clearInput}
         separator={separator}
-        onClick={() => !disabled && setVisible(!visible)}
-      />
+        onClick={triggerClick}
+        title={title}
+        hidePrefix={hidePrefix}
+      >
+        {children}
+      </Trigger>
     );
   };
   // render
@@ -138,9 +135,19 @@ const ListPicker: React.FC<ListPickerProps> = (props) => {
   );
 
   return (
-    <ListContext.Provider value={{ value, model, onChange: handleChange, options, setOptions }}>
+    <ListContext.Provider
+      value={{
+        value,
+        model,
+        onChange: handleChange,
+        options,
+        setOptions,
+        getOptionByValue,
+        getOptionsByValue,
+        getLabelByValue,
+      }}
+    >
       <Popover
-        distoryOnHide={false}
         disabled={disabled}
         content={renderOverlay()}
         trigger={trigger}
@@ -150,6 +157,7 @@ const ListPicker: React.FC<ListPickerProps> = (props) => {
         overlayClassName={classNames(`${defaultPrefix}--content`, overlayClassName)}
         placement={placement}
         overlayStyle={overlayStyle}
+        strategy="fixed"
       >
         {renderTrigger()}
       </Popover>
diff --git a/src/list/List.tsx b/src/list/List.tsx
index 0ae70c156f..bfdd17df45 100644
--- a/src/list/List.tsx
+++ b/src/list/List.tsx
@@ -19,7 +19,7 @@ const selectStatus = (value?: string, values?: string | string[]) => {
   return undefined;
 };
 
-export const List = WithRef<HTMLDivElement, ListProps>((props, ref?) => {
+export const InnerList = WithRef<HTMLDivElement, ListProps>((props, ref?) => {
   const {
     id,
     title,
@@ -185,4 +185,8 @@ export const List = WithRef<HTMLDivElement, ListProps>((props, ref?) => {
     </ListContext.Provider>
   );
 });
+
+const List: React.ForwardRefExoticComponent<ListProps & React.RefAttributes<HTMLDivElement>> & { isList?: boolean } =
+  InnerList;
+List.isList = true;
 export default List;
diff --git a/src/list/Selection.tsx b/src/list/Selection.tsx
index 9692d7e16d..a641e29395 100644
--- a/src/list/Selection.tsx
+++ b/src/list/Selection.tsx
@@ -12,7 +12,7 @@ import useCacheOptions from './hooks/useCacheOptions';
 
 type nodeType = React.ReactElement<ListProps> & { type: { isGIOList: boolean; isRecent: boolean } };
 
-const Selection: React.FC<SelectionProps> = (props) => {
+const Selection: React.FC<SelectionProps> & { isSelection?: boolean } = (props) => {
   const { className, style, options = [], children, ...rest } = props;
   const prefixCls = `${usePrefixCls(PREFIX)}--selection`;
   const isSelection = options?.every((val) => 'groupId' in val) ?? false;
@@ -108,5 +108,5 @@ const Selection: React.FC<SelectionProps> = (props) => {
   );
   return selectionProvider(renderNormal);
 };
-
+Selection.isSelection = true;
 export default Selection;
diff --git a/src/list/Trigger.tsx b/src/list/Trigger.tsx
new file mode 100644
index 0000000000..886b242a6c
--- /dev/null
+++ b/src/list/Trigger.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import Input from '../input';
+import WithRef from '../utils/withRef';
+import { TriggerProps } from './interfance';
+
+const Trigger: React.ForwardRefRenderFunction<HTMLInputElement, TriggerProps> = (props, ref) => {
+  const { value, placeholder, onClear, ...rest } = props;
+
+  const handleClear = (e: React.MouseEvent<Element, MouseEvent>) => {
+    onClear?.(e);
+    e.stopPropagation();
+  };
+  return (
+    <Input.Button ref={ref} placeholder={placeholder} value={(value as string) ?? ''} onClear={handleClear} {...rest} />
+  );
+};
+
+export default WithRef(Trigger);
diff --git a/src/list/context.tsx b/src/list/context.tsx
index f19f3c419d..fccb63bd16 100644
--- a/src/list/context.tsx
+++ b/src/list/context.tsx
@@ -9,12 +9,18 @@ export interface ListContextProps {
   onChange?: (value?: string | string[], options?: OptionProps | OptionProps[]) => void;
   options?: Map<string, OptionProps>;
   setOptions?: (options?: OptionProps[]) => void;
+  getOptionByValue?: (optValue?: string) => OptionProps | undefined;
+  getOptionsByValue?: (optValue?: string | string[]) => OptionProps | OptionProps[] | undefined;
+  getLabelByValue?: (val?: string | string[], separator?: string) => any;
 }
 const defaultList: ListContextProps = {
   value: '',
   model: undefined,
   onChange: noop,
   setOptions: noop,
+  getOptionByValue: undefined,
+  getOptionsByValue: undefined,
+  getLabelByValue: undefined,
 };
 export const ListContext = React.createContext<ListContextProps>(defaultList);
 
diff --git a/src/list/demos/List.stories.tsx b/src/list/demos/List.stories.tsx
index 089a048821..82169648b4 100644
--- a/src/list/demos/List.stories.tsx
+++ b/src/list/demos/List.stories.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';
 import { PlusOutlined, FilterOutlined, EventsPresetOutlined } from '@gio-design/icons';
 import { action } from '@storybook/addon-actions';
@@ -286,10 +286,10 @@ const ItemTemplate: Story<ItemProps> = () => {
     console.log('e suffix触发', e);
     e.stopPropagation();
   };
-
+  const ref = useRef(null);
   return (
     <div className="demo-box">
-      <List onChange={() => console.log('list onChange触发')}>
+      <List onChange={() => console.log('list onChange触发')} ref={ref}>
         <Item value="first">第1条咸鱼</Item>
         <Item value="second" prefix={<PlusOutlined size="14px" />}>
           第2条咸鱼
diff --git a/src/list/hooks/useCacheOptions.ts b/src/list/hooks/useCacheOptions.ts
index 6882d55d38..a618b3c525 100644
--- a/src/list/hooks/useCacheOptions.ts
+++ b/src/list/hooks/useCacheOptions.ts
@@ -1,4 +1,4 @@
-import { isArray, isEmpty, isNil } from 'lodash';
+import { isArray, isEmpty, isNil, isNumber } from 'lodash';
 import { useCallback, useRef } from 'react';
 import { OptionProps } from '../interfance';
 
@@ -34,7 +34,7 @@ const useCacheOptions = () => {
       : getOptionByValue(optValue);
 
   const getLabelByValue = (val?: string | string[], separator = '') => {
-    if (val === '' || typeof val === 'undefined') {
+    if (val === '' || typeof val === 'undefined' || isNumber(val)) {
       return '';
     }
     if (val?.includes('.')) {
@@ -49,7 +49,7 @@ const useCacheOptions = () => {
     return getOptionByValue(val)?.label ?? '';
   };
   const getOptionTreeByValue = (val?: string) => {
-    if (val === '' || typeof val === 'undefined') {
+    if (val === '' || typeof val === 'undefined' || isNumber(val)) {
       return '';
     }
     if (val?.includes('.')) {
diff --git a/src/list/inner/CascaderItem.tsx b/src/list/inner/CascaderItem.tsx
index 4fc3154bbc..4cbb5d25d4 100644
--- a/src/list/inner/CascaderItem.tsx
+++ b/src/list/inner/CascaderItem.tsx
@@ -34,7 +34,6 @@ const CascaderItem = WithRef<HTMLLIElement, CascaderItemProps & Omit<DOMAttribut
     const childSelectPrent = generateSelectParent(label, value, selectParent);
     const childNodeOptions = convertChildrenToData(children, {});
     const mergedOptions = useMemo(() => [...childNodeOptions, ...childrens], [childNodeOptions, childrens]);
-
     useEffect(() => {
       setOptions?.(mergedOptions as OptionProps[]);
     }, [mergedOptions, setOptions]);
@@ -104,7 +103,6 @@ const CascaderItem = WithRef<HTMLLIElement, CascaderItemProps & Omit<DOMAttribut
         value={value}
         disabled={disabled}
         suffix={React.isValidElement(children) || !isEmpty(childrens) ? <RightFilled size="14px" /> : undefined}
-        onChange={noop}
         onClick={React.isValidElement(children) || !isEmpty(childrens) ? noop : onClick}
         selected={isSelected}
         wrapper={PopoverRender}
diff --git a/src/list/inner/baseItem.tsx b/src/list/inner/baseItem.tsx
index fc397c737b..da9ae8f1ae 100644
--- a/src/list/inner/baseItem.tsx
+++ b/src/list/inner/baseItem.tsx
@@ -9,7 +9,7 @@ import WithRef from '../../utils/withRef';
 
 const defaultContentRender = (element: React.ReactNode | Element): React.ReactElement => element as React.ReactElement;
 const renderIcon = (className: string, prefix: React.ReactNode) => <span className={className}>{prefix}</span>;
-const BaseItem = WithRef<HTMLLIElement, BaseItemProps & Omit<DOMAttributes<HTMLLIElement>, 'onClick'>>(
+const InnerBaseItem = WithRef<HTMLLIElement, BaseItemProps & Omit<DOMAttributes<HTMLLIElement>, 'onClick'>>(
   (props, ref?) => {
     const {
       label,
@@ -75,5 +75,10 @@ const BaseItem = WithRef<HTMLLIElement, BaseItemProps & Omit<DOMAttributes<HTMLL
     return wrapper(renderElement) as ReactElement;
   }
 );
-
+const BaseItem: React.ForwardRefExoticComponent<
+  BaseItemProps & Omit<React.RefAttributes<HTMLLIElement>, 'onClick' | 'onChange'>
+> & {
+  isBaseItem?: boolean;
+} = InnerBaseItem;
+BaseItem.isBaseItem = true;
 export default BaseItem;
diff --git a/src/list/interfance.ts b/src/list/interfance.ts
index 3000431e2e..ffc14d1ea5 100644
--- a/src/list/interfance.ts
+++ b/src/list/interfance.ts
@@ -133,3 +133,13 @@ export interface BaseItemProps extends Pick<OptionProps, 'value' | 'disabled' |
   selected?: boolean;
   onClick?: (value: string) => void;
 }
+
+export interface TriggerProps {
+  disabled?: boolean;
+  value?: string | React.ReactNode;
+  separator?: string;
+  children?: React.ReactNode;
+  placeholder?: string;
+  size?: 'small' | 'normal';
+  onClear?: (e?: React.MouseEvent<Element, MouseEvent>) => void;
+}
diff --git a/src/list/util.ts b/src/list/util.ts
index b20b4eb274..301e5c4126 100644
--- a/src/list/util.ts
+++ b/src/list/util.ts
@@ -1,4 +1,5 @@
-import { isEmpty } from 'lodash';
+import { isArray, isEmpty, isUndefined } from 'lodash';
+import toArray from 'rc-util/lib/Children/toArray';
 import React from 'react';
 import { ListProps } from '.';
 import { ModelType, OptionProps } from './interfance';
@@ -72,3 +73,60 @@ export const generateSelectParent = (label: string | React.ReactNode, value: str
           value,
         },
       ];
+
+export const collectOption = (child: React.ReactNode, otherProps?: OtherProps): OptionProps | undefined => {
+  if (React.isValidElement(child)) {
+    const {
+      props: { value, children, label, ...restProps },
+    } = child as React.ReactElement & { props: OptionProps };
+    const option = { value, label: label ?? children, ...restProps };
+    return { prefix: otherProps?.prefix?.(option), suffix: otherProps?.suffix?.(option), ...option };
+  }
+  return undefined;
+};
+
+export const collectOptions = (childs?: React.ReactNode | OptionProps): OptionProps[] => {
+  const optionsArr: OptionProps[] = [];
+  toArray(childs).forEach((child) => {
+    const { props, type } = child as React.ReactElement & { props: OptionProps } & {
+      props: { options?: OptionProps[] };
+    } & { type: any };
+    const value = props?.value;
+    const children = props?.children;
+    const prefix = props?.prefix;
+    const options = props?.options;
+    const suffix = props?.suffix;
+
+    const isBaseItem = type?.isBaseItem;
+    const isList = type?.isList;
+    const isRecent = type?.isRecent;
+    const isSelection = type?.isSelection;
+    const isSelect = type?.isSelect;
+
+    if (React.isValidElement(child) && isUndefined(isRecent)) {
+      let listPrefix;
+      let listSuffix;
+      if (isSelection && isArray(options)) {
+        optionsArr.push(...convertOptions(options, {}));
+      }
+      // options
+      if ((isList || isSelect) && isArray(options)) {
+        listPrefix = prefix;
+        listSuffix = suffix;
+        optionsArr.push(...convertOptions(options, { prefix: listPrefix, suffix: listSuffix }));
+      }
+
+      // JSX item
+      if (isBaseItem && !isUndefined(value)) {
+        const opt = collectOption(child, { prefix: listPrefix, suffix: listSuffix });
+        if (!isUndefined(opt)) optionsArr?.push(opt);
+      }
+
+      if (!isUndefined(children)) {
+        // 继续遍历
+        optionsArr.push(...collectOptions(children));
+      }
+    }
+  });
+  return optionsArr;
+};
diff --git a/src/select/Select.tsx b/src/select/Select.tsx
index 4b1cd24afb..78e9674703 100644
--- a/src/select/Select.tsx
+++ b/src/select/Select.tsx
@@ -1,18 +1,17 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useMemo, useRef } from 'react';
 import classNames from 'classnames';
-import { isEmpty } from 'lodash';
 import { SelectProps } from './interface';
 import Popover from '../popover';
-import Trigger from './Trigger';
+import Trigger from '../list-picker/Trigger';
 import usePrefixCls from '../utils/hooks/use-prefix-cls';
 import List, { OptionProps } from '../list';
 import useControlledState from '../utils/hooks/useControlledState';
 import './style/index';
 import { ListContext } from '../list/context';
 import { convertChildrenToData, convertOptions } from '../list/util';
-import useChacheOptions from '../list/hooks/useCacheOptions';
+import useCacheOptions from '../list/hooks/useCacheOptions';
 
-const Select: React.FC<SelectProps> = (props) => {
+const Select: React.FC<SelectProps> & { isSelect?: boolean } = (props) => {
   const {
     prefixCls = 'select',
     value: controlledValue,
@@ -32,15 +31,15 @@ const Select: React.FC<SelectProps> = (props) => {
     className,
     style,
     placement = 'bottomLeft',
-    disabled,
+    disabled = false,
     children,
     placeholder,
     triggerPrefix,
     triggerSuffix,
     maxWidth,
     hidePrefix = false,
-    title: controlledTitle,
     allowClear,
+    title,
     onClear,
     renderTrigger: propsRenderTrigger,
     autoWidth = true,
@@ -51,9 +50,7 @@ const Select: React.FC<SelectProps> = (props) => {
   const defaultPrefixCls = usePrefixCls(prefixCls);
   const [value, setValue] = useControlledState(controlledValue, defaultValue);
   const [visible, setVisible] = useControlledState(controlledVisible, false);
-  const [title, setTitle] = useState<string | React.ReactNode | undefined>(undefined);
-  const [titlePrefix, setTitlePrefix] = useState<string | React.ReactNode>(undefined);
-  const cache = useChacheOptions();
+  const { options: cacheOptions, setOptions, getOptionByValue, getLabelByValue, getOptionsByValue } = useCacheOptions();
   const triggerRef = useRef<HTMLInputElement | undefined>(undefined);
   // options
   const nodesToOptions = useMemo<OptionProps[]>(
@@ -62,20 +59,8 @@ const Select: React.FC<SelectProps> = (props) => {
   );
   const convertedOptions = useMemo(() => convertOptions(options, { prefix, suffix }), [options, prefix, suffix]);
   const mergedOptions = useMemo(() => [...nodesToOptions, ...convertedOptions], [nodesToOptions, convertedOptions]);
-  cache.setOptions(mergedOptions);
-  const activeOption = useMemo(() => cache.getOptionByValue(value), [cache, value]);
-
-  // update trigger value
-  useEffect(() => {
-    setTitle(activeOption?.label);
-  }, [activeOption?.label]);
-
-  useEffect(() => {
-    if (!hidePrefix) {
-      setTitlePrefix(activeOption?.prefix ?? triggerPrefix);
-    }
-  }, [activeOption?.prefix, controlledValue, hidePrefix, triggerPrefix]);
-
+  // 如果不是children 的话 需要在这里进行收集
+  setOptions(mergedOptions);
   const handVisibleChange = (vis: boolean) => {
     setVisible(vis);
     onVisibleChange?.(vis);
@@ -92,29 +77,32 @@ const Select: React.FC<SelectProps> = (props) => {
     handVisibleChange(false);
     e.stopPropagation();
   };
+  const triggerClick = () => !disabled && setVisible(!visible);
 
   const renderTrigger = () => {
     if (typeof propsRenderTrigger === 'function') {
-      return propsRenderTrigger?.();
+      const node = propsRenderTrigger?.();
+      return React.cloneElement(node, {
+        onClick: triggerClick,
+      });
     }
     return (
       <Trigger
         size={size}
-        value={controlledTitle ?? title}
+        value={value}
         disabled={disabled}
         placeholder={placeholder}
-        onInputChange={(val) => {
-          isEmpty(val) && handleChange();
-        }}
         ref={triggerRef as React.RefObject<HTMLInputElement>}
         style={style}
         className={className}
-        prefix={titlePrefix}
+        prefix={triggerPrefix}
         suffix={triggerSuffix}
         allowClear={allowClear}
         onClear={handleOnClear}
         maxWidth={maxWidth}
-        onClick={() => !disabled && setVisible(!visible)}
+        hidePrefix={hidePrefix}
+        title={title}
+        onClick={triggerClick}
       />
     );
   };
@@ -134,9 +122,19 @@ const Select: React.FC<SelectProps> = (props) => {
   );
 
   return (
-    <ListContext.Provider value={{ value, onChange: handleChange }}>
+    <ListContext.Provider
+      value={{
+        value,
+        options: cacheOptions,
+        getLabelByValue,
+        getOptionByValue,
+        getOptionsByValue,
+        onChange: handleChange,
+        setOptions,
+      }}
+    >
       <Popover
-        distoryOnHide={false}
+        disabled={disabled}
         content={renderOverlay()}
         trigger="click"
         visible={visible}
@@ -151,5 +149,5 @@ const Select: React.FC<SelectProps> = (props) => {
     </ListContext.Provider>
   );
 };
-
+Select.isSelect = true;
 export default Select;
diff --git a/src/select/Trigger.tsx b/src/select/Trigger.tsx
deleted file mode 100644
index 83c0bc9c50..0000000000
--- a/src/select/Trigger.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { isNil } from 'lodash';
-import React from 'react';
-import Input from '../input';
-import WithRef from '../utils/withRef';
-import { TriggerProps } from './interface';
-
-const Trigger: React.ForwardRefRenderFunction<HTMLInputElement, TriggerProps> = (props, ref) => {
-  const { value, ...rest } = props;
-  return <Input.Button ref={ref} value={isNil(value) ? undefined : value.toString()} {...rest} />;
-};
-
-export default WithRef(Trigger);
diff --git a/src/utils/hooks/useControlledState.ts b/src/utils/hooks/useControlledState.ts
index 4f4df19c6b..0571011a4c 100644
--- a/src/utils/hooks/useControlledState.ts
+++ b/src/utils/hooks/useControlledState.ts
@@ -16,7 +16,6 @@ const useControlledState = <T>(
   //   throw new TypeError('Either "value" or "defaultValue" variable must be set. Now both are undefined');
   // }
   const [innerState, setInnerState] = useState<T>(isUndefined(outterState) ? defaultOutterState : outterState);
-
   const setState = useRef((state: T | (() => T), force = false) => {
     if (isUndefined(outterState) || force) {
       setInnerState(state);