feat(module:select): support to customize attr.title of nz-option-item (#8097)

* feat(module:select): support to customize attr.title of nz-option-item

* feat(module:select): support to customize attr.title of nz-option-item

Author: Laffery

components/select/doc/index.en-US.md

@@ -76,6 +76,7 @@ import { NzSelectModule } from 'ng-zorro-antd/select';
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
 | `[nzDisabled]` | Disable this option | `boolean` | `false` |
+| `[nzTitle]` | Native title hint on this option | `string  \| number` | - |
 | `[nzLabel]` | The text show in nz-select and dropdown menu | `string  \| number` | - |
 | `[nzValue]` | The value passed to ngModel of nz-select | `any ` | - |
 | `[nzKey]` | Should be passed when typeof nzValue - Object. Key will be used for performance optimizations | `string \| number ` | - |

components/select/doc/index.zh-CN.md

@@ -77,6 +77,7 @@ import { NzSelectModule } from 'ng-zorro-antd/select';
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | `[nzDisabled]` | 是否禁用 | `boolean` | `false` |
+| `[nzTitle]` | 选项上的原生 title 提示 | `string  \| number` | - |
 | `[nzLabel]` | 选中该 nz-option 后，nz-select 中显示的文字 | `string  \| number` | - |
 | `[nzValue]` | nz-select 中 ngModel 的值 | `any` | - |
 | `[nzKey]` | nz-select 中 ngModel 的值 | `string \| number` | - |

components/select/option-container.component.ts

@@ -59,6 +59,7 @@ import { NzSelectItemInterface, NzSelectModeType } from './select.types';
               [grouped]="!!item.groupLabel"
               [disabled]="item.nzDisabled"
               [showState]="mode === 'tags' || mode === 'multiple'"
+              [title]="item.nzTitle"
               [label]="item.nzLabel"
               [compareWith]="compareWith"
               [activatedValue]="activatedValue"

components/select/option-item.component.ts

@@ -40,7 +40,7 @@ import { NzSafeAny } from 'ng-zorro-antd/core/types';
   encapsulation: ViewEncapsulation.None,
   host: {
     class: 'ant-select-item ant-select-item-option',
-    '[attr.title]': 'label',
+    '[attr.title]': 'title',
     '[class.ant-select-item-option-grouped]': 'grouped',
     '[class.ant-select-item-option-selected]': 'selected && !disabled',
     '[class.ant-select-item-option-disabled]': 'disabled',
@@ -56,6 +56,7 @@ export class NzOptionItemComponent implements OnChanges, OnInit {
   @Input() template: TemplateRef<NzSafeAny> | null = null;
   @Input() disabled = false;
   @Input() showState = false;
+  @Input() title?: string | number | null;
   @Input() label: string | number | null = null;
   @Input() value: NzSafeAny | null = null;
   @Input() activatedValue: NzSafeAny | null = null;

components/select/option.component.ts

@@ -43,6 +43,7 @@ export class NzOptionComponent implements OnChanges, OnInit {
   changes = new Subject<void>();
   groupLabel: string | number | TemplateRef<NzSafeAny> | null = null;
   @ViewChild(TemplateRef, { static: true }) template!: TemplateRef<NzSafeAny>;
+  @Input() nzTitle?: string | number | null;
   @Input() nzLabel: string | number | null = null;
   @Input() nzValue: NzSafeAny | null = null;
   @Input() nzKey?: string | number;

components/select/select.component.ts

@@ -623,6 +623,7 @@ export class NzSelectComponent implements ControlValueAccessor, OnInit, AfterCon
       const listOfTransformedItem = listOfOptions.map(item => {
         return {
           template: item.label instanceof TemplateRef ? item.label : null,
+          nzTitle: this.getTitle(item.title, item.label),
           nzLabel: typeof item.label === 'string' || typeof item.label === 'number' ? item.label : null,
           nzValue: item.value,
           nzDisabled: item.disabled || false,
@@ -766,6 +767,7 @@ export class NzSelectComponent implements ControlValueAccessor, OnInit, AfterCon
               nzHide,
               nzCustomContent,
               groupLabel,
+              nzTitle: this.getTitle(item.nzTitle, item.nzLabel),
               type: 'item',
               key: nzKey === undefined ? nzValue : nzKey
             };
@@ -795,4 +797,17 @@ export class NzSelectComponent implements ControlValueAccessor, OnInit, AfterCon
       }
     });
   }
+
+  private getTitle(title: NzSelectOptionInterface['title'], label: NzSelectOptionInterface['label']): string {
+    let rawTitle: string = undefined!;
+    if (title === undefined) {
+      if (typeof label === 'string' || typeof label === 'number') {
+        rawTitle = label.toString();
+      }
+    } else if (typeof title === 'string' || typeof title === 'number') {
+      rawTitle = title.toString();
+    }
+
+    return rawTitle;
+  }
 }

components/select/select.spec.ts

@@ -275,6 +275,21 @@ describe('select', () => {
       expect(selectElement.classList).toContain('ant-select-disabled');
       expect(selectElement.querySelector('input')!.getAttribute('disabled')).toBe('');
     }));
+    it('should nzTitle works', fakeAsync(() => {
+      component.listOfOption = [
+        { nzValue: '1', nzLabel: '1' },
+        { nzValue: '2', nzLabel: '2', nzTitle: '-' },
+        { nzValue: '3', nzLabel: '3', nzTitle: null }
+      ];
+      component.nzOpen = true;
+      fixture.detectChanges();
+      flush();
+      fixture.detectChanges();
+      console.log(document.querySelectorAll('nz-option-item'));
+      expect((document.querySelectorAll('nz-option-item')[0] as HTMLElement)?.title).toBe('1');
+      expect((document.querySelectorAll('nz-option-item')[1] as HTMLElement)?.title).toBe('-');
+      expect((document.querySelectorAll('nz-option-item')[2] as HTMLElement)?.title).toBeFalsy();
+    }));
 
     it('should select option by enter', fakeAsync(() => {
       const flushChanges = (): void => {
@@ -1554,6 +1569,7 @@ describe('select', () => {
         *ngFor="let o of listOfOption"
         [nzValue]="o.nzValue"
         [nzLabel]="o.nzLabel"
+        [nzTitle]="o.nzTitle"
         [nzDisabled]="o.nzDisabled"
         [nzHide]="o.nzHide"
       ></nz-option>
@@ -1562,6 +1578,7 @@ describe('select', () => {
           *ngFor="let o of group.children"
           [nzValue]="o.nzValue"
           [nzLabel]="o.nzLabel"
+          [nzTitle]="o.nzTitle"
           [nzDisabled]="o.nzDisabled"
           [nzHide]="o.nzHide"
         ></nz-option>

components/select/select.types.ts

@@ -12,6 +12,7 @@ export interface NzSelectItemInterface {
   template?: TemplateRef<NzSafeAny> | null;
   nzLabel: string | number | null;
   nzValue: NzSafeAny | null;
+  nzTitle?: string | number | null;
   nzDisabled?: boolean;
   nzHide?: boolean;
   nzCustomContent?: boolean;
@@ -23,6 +24,7 @@ export interface NzSelectItemInterface {
 export interface NzSelectOptionInterface {
   label: string | number | null | TemplateRef<NzSafeAny>;
   value: NzSafeAny | null;
+  title?: string | number | null;
   disabled?: boolean;
   hide?: boolean;
   groupLabel?: string | number | TemplateRef<NzSafeAny> | null;