fix: Group not provide title attr (#727)

* fix: group missing title

* test: coverage

Author: zombieJ

src/OptionList.tsx

@@ -23,6 +23,10 @@ export interface RefOptionListProps {
   scrollTo?: (index: number) => void;
 }
 
+function isTitleType(content: any) {
+  return typeof content === 'string' || typeof content === 'number';
+}
+
 /**
  * Using virtual list of option display.
  * Will fallback to dom if use customize render.
@@ -272,8 +276,13 @@ const OptionList: React.ForwardRefRenderFunction<RefOptionListProps, OptionListP
 
           // Group
           if (group) {
+            const groupTitle = data.title ?? (isTitleType(label) && label);
+
             return (
-              <div className={classNames(itemPrefixCls, `${itemPrefixCls}-group`)}>
+              <div
+                className={classNames(itemPrefixCls, `${itemPrefixCls}-group`)}
+                title={groupTitle}
+              >
                 {label !== undefined ? label : key}
               </div>
             );
@@ -301,10 +310,7 @@ const OptionList: React.ForwardRefRenderFunction<RefOptionListProps, OptionListP
           // https://github.com/ant-design/ant-design/issues/34145
           const content = typeof mergedLabel === 'number' ? mergedLabel : mergedLabel || value;
           // https://github.com/ant-design/ant-design/issues/26717
-          let optionTitle =
-            typeof content === 'string' || typeof content === 'number'
-              ? content.toString()
-              : undefined;
+          let optionTitle = isTitleType(content) ? content.toString() : undefined;
           if (title !== undefined) {
             optionTitle = title;
           }

tests/Group.test.tsx

@@ -34,4 +34,26 @@ describe('Select.Group', () => {
     wrapper.find('input').simulate('change', { target: { value: '1' } });
     expect(wrapper.find('List').props().data).toHaveLength(2);
   });
+
+  describe('group title', () => {
+    it('label as title', () => {
+      const wrapper = mount(
+        <Select open>
+          <OptGroup label="zombiej" />
+        </Select>,
+      );
+
+      expect(wrapper.find('.rc-select-item-group').prop('title')).toEqual('zombiej');
+    });
+
+    it('customize title', () => {
+      const wrapper = mount(
+        <Select open>
+          <OptGroup label="zombiej" title="bamboo" />
+        </Select>,
+      );
+
+      expect(wrapper.find('.rc-select-item-group').prop('title')).toEqual('bamboo');
+    });
+  });
 });

tests/__snapshots__/Select.test.tsx.snap

@@ -534,6 +534,7 @@ exports[`Select.Basic render renders dropdown correctly 1`] = `
               >
                 <div
                   class="antd-item antd-item-group"
+                  title="manager"
                 >
                   manager
                 </div>
@@ -584,6 +585,7 @@ exports[`Select.Basic render renders dropdown correctly 1`] = `
                 </div>
                 <div
                   class="antd-item antd-item-group"
+                  title="engineer"
                 >
                   engineer
                 </div>

tests/__snapshots__/Tags.test.tsx.snap

@@ -142,6 +142,7 @@ exports[`Select.Tags OptGroup renders correctly 1`] = `
                 >
                   <div
                     class="rc-select-item rc-select-item-group"
+                    title="Manager"
                   >
                     Manager
                   </div>
@@ -170,6 +171,7 @@ exports[`Select.Tags OptGroup renders correctly 1`] = `
                   </div>
                   <div
                     class="rc-select-item rc-select-item-group"
+                    title="Engineer"
                   >
                     Engineer
                   </div>