feat(module:auto-complete): support nzDropdownMatchSelectWidth (#9879)

Author: HyperLife1119

components/auto-complete/autocomplete-trigger.directive.ts

@@ -263,12 +263,14 @@ export class NzAutocompleteTriggerDirective implements AfterViewInit, ControlVal
     }
 
     if (!this.overlayRef) {
+      const width = this.nzAutocomplete.nzWidth || this.getHostWidth();
+      const dropdownMatchSelectWidth = this.nzAutocomplete.nzDropdownMatchSelectWidth;
       this.overlayRef = createOverlayRef(this.injector, {
         positionStrategy: this.getOverlayPosition(),
         disposeOnNavigation: true,
         scrollStrategy: createRepositionScrollStrategy(this.injector),
-        // default host element width
-        width: this.nzAutocomplete.nzWidth || this.getHostWidth()
+        minWidth: dropdownMatchSelectWidth ? undefined : width,
+        width: dropdownMatchSelectWidth ? width : undefined
       });
     }
 
@@ -289,7 +291,9 @@ export class NzAutocompleteTriggerDirective implements AfterViewInit, ControlVal
 
   private updateStatus(): void {
     if (this.overlayRef) {
-      this.overlayRef.updateSize({ width: this.nzAutocomplete.nzWidth || this.getHostWidth() });
+      const dropdownMatchSelectWidth = this.nzAutocomplete.nzDropdownMatchSelectWidth;
+      const width = this.nzAutocomplete.nzWidth || this.getHostWidth();
+      this.overlayRef.updateSize({ width: dropdownMatchSelectWidth ? width : undefined });
     }
     this.nzAutocomplete.setVisibility();
     this.resetActiveItem();

components/auto-complete/autocomplete.component.ts

@@ -111,6 +111,7 @@ export class NzAutocompleteComponent implements AfterContentInit, AfterViewInit,
   @Input() nzOverlayStyle: Record<string, string> = {};
   @Input({ transform: booleanAttribute }) nzDefaultActiveFirstOption = true;
   @Input({ transform: booleanAttribute }) nzBackfill = false;
+  @Input({ transform: booleanAttribute }) nzDropdownMatchSelectWidth = true;
   @Input() compareWith: CompareWith = (o1, o2) => o1 === o2;
   @Input() nzDataSource?: AutocompleteDataSource;
   @Output()

components/auto-complete/autocomplete.spec.ts

@@ -12,12 +12,12 @@ import {
   ElementRef,
   NgZone,
   QueryList,
+  signal,
   SimpleChanges,
   ViewChild,
-  ViewChildren,
-  signal
+  ViewChildren
 } from '@angular/core';
-import { ComponentFixture, inject as testingInject, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, inject as testingInject } from '@angular/core/testing';
 import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { Subject } from 'rxjs';
@@ -302,6 +302,27 @@ describe('auto-complete', () => {
       expect(Math.ceil(parseFloat(overlayPane.style.width))).toBe(500);
     });
 
+    it('should apply dropdown match select width', () => {
+      component.dropdownMatchSelectWidth.set(true);
+      component.width.set(500);
+      fixture.detectChanges();
+
+      component.trigger.openPanel();
+      fixture.detectChanges();
+
+      const overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
+      expect(Math.ceil(parseFloat(overlayPane.style.width))).toBe(500);
+
+      component.dropdownMatchSelectWidth.set(false);
+      component.trigger.closePanel();
+      fixture.detectChanges();
+
+      component.trigger.openPanel();
+      fixture.detectChanges();
+
+      expect(Math.ceil(parseFloat(overlayPane.style.width))).not.toBe(500);
+    });
+
     it('should backfill display value when DOWN key is pressed', async () => {
       component.trigger.openPanel();
       await stabilize(fixture, 0);
@@ -900,6 +921,7 @@ class NzTestSimpleAutocompleteComponent {
       [nzOverlayClassName]="overlayClassName()"
       [nzOverlayStyle]="overlayStyle()"
       [nzDataSource]="options()"
+      [nzDropdownMatchSelectWidth]="dropdownMatchSelectWidth()"
       [nzDefaultActiveFirstOption]="false"
       nzBackfill
       #auto
@@ -909,6 +931,7 @@ class NzTestSimpleAutocompleteComponent {
 class NzTestAutocompletePropertyComponent {
   inputValue?: string;
   readonly width = signal<number | undefined>(undefined);
+  readonly dropdownMatchSelectWidth = signal(true);
   readonly overlayClassName = signal('');
   readonly overlayStyle = signal({});
   readonly options = signal(['Burns Bay Road', 'Downing Street', 'Wall Street']);

components/auto-complete/doc/index.en-US.md

@@ -37,6 +37,7 @@ When there is a need for autocomplete functionality.
 | Property                       | Description                                                                                    | Type                            | Default                         |
 | ------------------------------ | ---------------------------------------------------------------------------------------------- | ------------------------------- | ------------------------------- |
 | `[nzBackfill]`                 | backfill selected item the input when using keyboard                                           | `boolean`                       | `false`                         |
+| `[nzDropdownMatchSelectWidth]` | Whether dropdown's width is same width than select.                                            | `boolean`                       | `true`                          |
 | `[nzDataSource]`               | Data source for autocomplete                                                                   | `AutocompleteDataSource`        | -                               |
 | `[nzDefaultActiveFirstOption]` | Whether active first option by default                                                         | `boolean`                       | `true`                          |
 | `[nzWidth]`                    | Custom width, unit px                                                                          | `number`                        | trigger element width           |

components/auto-complete/doc/index.zh-CN.md

@@ -38,6 +38,7 @@ description: 输入框自动完成功能。
 | 属性                           | 说明                                                                                          | 类型                            | 默认值                          |
 | ------------------------------ | --------------------------------------------------------------------------------------------- | ------------------------------- | ------------------------------- |
 | `[nzBackfill]`                 | 使用键盘选择选项的时候，会把当前高亮项的值即时回填到输入框中                                  | `boolean`                       | `false`                         |
+| `[nzDropdownMatchSelectWidth]` | 下拉菜单和选择器同宽                                                                          | `boolean`                       | `true`                          |
 | `[nzDataSource]`               | 自动完成的数据源                                                                              | `AutocompleteDataSource`        | -                               |
 | `[nzDefaultActiveFirstOption]` | 是否默认高亮第一个选项。                                                                      | `boolean`                       | `true`                          |
 | `[nzWidth]`                    | 自定义宽度单位 px                                                                             | `number`                        | 触发元素宽度                    |