feat: support title (#931)

Author: afc163

src/BaseSelect.tsx

@@ -126,6 +126,7 @@ export type BaseSelectPropsWithoutPrivate = Omit<BaseSelectProps, keyof BaseSele
 export interface BaseSelectProps extends BaseSelectPrivateProps, React.AriaAttributes {
   className?: string;
   style?: React.CSSProperties;
+  title?: string;
   showSearch?: boolean;
   tagRender?: (props: CustomTagProps) => React.ReactElement;
   direction?: 'ltr' | 'rtl';
@@ -830,7 +831,6 @@ const BaseSelect = React.forwardRef((props: BaseSelectProps, ref: React.Ref<Base
           </span>
         )}
         {selectorNode}
-
         {arrowNode}
         {clearNode}
       </div>

src/Selector/SingleSelector.tsx

@@ -36,6 +36,7 @@ const SingleSelector: React.FC<SelectorProps> = (props) => {
     onInputPaste,
     onInputCompositionStart,
     onInputCompositionEnd,
+    title,
   } = props;
 
   const [inputChanged, setInputChanged] = React.useState(false);
@@ -58,8 +59,8 @@ const SingleSelector: React.FC<SelectorProps> = (props) => {
   // Not show text when closed expect combobox mode
   const hasTextInput = mode !== 'combobox' && !open && !showSearch ? false : !!inputValue;
 
-  // Get title
-  const title = getTitle(item);
+  // Get title of selection item
+  const selectionTitle = title === undefined ? getTitle(item) : title;
 
   const renderPlaceholder = () => {
     if (item) {
@@ -105,7 +106,7 @@ const SingleSelector: React.FC<SelectorProps> = (props) => {
 
       {/* Display value */}
       {!combobox && item && !hasTextInput && (
-        <span className={`${prefixCls}-selection-item`} title={title}>
+        <span className={`${prefixCls}-selection-item`} title={selectionTitle}>
           {item.label}
         </span>
       )}

src/Selector/index.tsx

@@ -22,6 +22,7 @@ export interface InnerSelectorProps {
   prefixCls: string;
   id: string;
   mode: Mode;
+  title?: string;
 
   inputRef: React.Ref<HTMLInputElement | HTMLTextAreaElement>;
   placeholder?: React.ReactNode;

tests/Select.test.tsx

@@ -1974,4 +1974,33 @@ describe('Select.Basic', () => {
     expect(wrapper.find('.rc-select').getDOMNode().className).toContain('-focused');
     jest.useRealTimers();
   });
+
+  it('should support title', () => {
+    const wrapper1 = mount(
+      <Select
+        defaultValue="lucy"
+        options={[]}
+      />,
+    );
+    expect(wrapper1.find('.rc-select').prop('title')).toBe(undefined);
+    expect(wrapper1.find('.rc-select-selection-item').prop('title')).toBe('lucy');
+    const wrapper2 = mount(
+      <Select
+        defaultValue="lucy"
+        options={[]}
+        title=""
+      />,
+    );
+    expect(wrapper2.find('.rc-select').prop('title')).toBe('');
+    expect(wrapper2.find('.rc-select-selection-item').prop('title')).toBe('');
+    const wrapper3 = mount(
+      <Select
+        defaultValue="lucy"
+        options={[]}
+        title="title"
+      />,
+    );
+    expect(wrapper3.find('.rc-select').prop('title')).toBe('title');
+    expect(wrapper3.find('.rc-select-selection-item').prop('title')).toBe('title');
+  });
 });