diff --git a/components/cascader/cascader.component.ts b/components/cascader/cascader.component.ts index 5d4908d43e2..f0b533befc5 100644 --- a/components/cascader/cascader.component.ts +++ b/components/cascader/cascader.component.ts @@ -5,7 +5,12 @@ import { Direction, Directionality } from '@angular/cdk/bidi'; import { BACKSPACE, DOWN_ARROW, ENTER, ESCAPE, LEFT_ARROW, RIGHT_ARROW, UP_ARROW } from '@angular/cdk/keycodes'; -import { CdkConnectedOverlay, ConnectionPositionPair, OverlayModule } from '@angular/cdk/overlay'; +import { + CdkConnectedOverlay, + ConnectedOverlayPositionChange, + ConnectionPositionPair, + OverlayModule +} from '@angular/cdk/overlay'; import { _getEventTarget } from '@angular/cdk/platform'; import { SlicePipe } from '@angular/common'; import { @@ -43,7 +48,13 @@ import { slideMotion } from 'ng-zorro-antd/core/animation'; import { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/config'; import { NzFormItemFeedbackIconComponent, NzFormNoStatusService, NzFormStatusService } from 'ng-zorro-antd/core/form'; import { NzNoAnimationDirective } from 'ng-zorro-antd/core/no-animation'; -import { DEFAULT_CASCADER_POSITIONS, NzOverlayModule } from 'ng-zorro-antd/core/overlay'; +import { + DEFAULT_CASCADER_POSITIONS, + getPlacementName, + NzOverlayModule, + POSITION_MAP, + POSITION_TYPE +} from 'ng-zorro-antd/core/overlay'; import { NzDestroyService } from 'ng-zorro-antd/core/services'; import { NzTreeBase, NzTreeNode } from 'ng-zorro-antd/core/tree'; import { @@ -62,6 +73,7 @@ import { NzSelectClearComponent, NzSelectItemComponent, NzSelectPlaceholderComponent, + NzSelectPlacementType, NzSelectSearchComponent } from 'ng-zorro-antd/select'; import { NZ_SPACE_COMPACT_ITEM_TYPE, NZ_SPACE_COMPACT_SIZE, NzSpaceCompactItemDirective } from 'ng-zorro-antd/space'; @@ -73,6 +85,7 @@ import { NzCascaderComponentAsSource, NzCascaderExpandTrigger, NzCascaderOption, + NzCascaderPlacement, NzCascaderSize, NzCascaderTriggerType, NzShowSearchOptions @@ -166,9 +179,14 @@ const defaultDisplayRender = (labels: string[]): string => labels.join(' / '); [cdkConnectedOverlayOpen]="menuVisible" (overlayOutsideClick)="onClickOutside($event)" (detach)="closeMenu()" + (positionChange)="onPositionChange($event)" >
| undefined { return this.input$.getValue(); } + /** Used to store the native `` element since it might be set asynchronously. */ private input$ = new BehaviorSubject | undefined>(undefined); @@ -327,6 +347,7 @@ export class NzCascaderComponent @Input() nzStatus: NzStatus = ''; @Input({ transform: booleanAttribute }) nzMultiple: boolean = false; @Input() nzMaxTagCount: number = Infinity; + @Input() nzPlacement: NzCascaderPlacement = 'bottomLeft'; @Input() nzTriggerAction: NzCascaderTriggerType | NzCascaderTriggerType[] = ['click'] as NzCascaderTriggerType[]; @Input() nzChangeOn?: (option: NzCascaderOption, level: number) => boolean; @@ -389,6 +410,7 @@ export class NzCascaderComponent */ dropdownWidthStyle?: string; dropdownHeightStyle: 'auto' | '' = ''; + dropdownPosition: NzCascaderPlacement = 'bottomLeft'; isFocused = false; locale!: NzCascaderI18nInterface; @@ -551,13 +573,23 @@ export class NzCascaderComponent } ngOnChanges(changes: SimpleChanges): void { - const { nzStatus, nzSize } = changes; + const { nzStatus, nzSize, nzPlacement } = changes; if (nzStatus) { this.setStatusStyles(this.nzStatus, this.hasFeedback); } if (nzSize) { this.size.set(nzSize.currentValue); } + if (nzPlacement) { + const { currentValue } = nzPlacement; + this.dropdownPosition = currentValue as NzCascaderPlacement; + const listOfPlacement = ['bottomLeft', 'topLeft', 'bottomRight', 'topRight']; + if (currentValue && listOfPlacement.includes(currentValue)) { + this.positions = [POSITION_MAP[currentValue as POSITION_TYPE]]; + } else { + this.positions = listOfPlacement.map(e => POSITION_MAP[e as POSITION_TYPE]); + } + } } ngOnDestroy(): void { @@ -939,6 +971,11 @@ export class NzCascaderComponent } } + onPositionChange(position: ConnectedOverlayPositionChange): void { + const placement = getPlacementName(position); + this.dropdownPosition = placement as NzSelectPlacementType; + } + private isActionTrigger(action: 'click' | 'hover'): boolean { return typeof this.nzTriggerAction === 'string' ? this.nzTriggerAction === action diff --git a/components/cascader/cascader.spec.ts b/components/cascader/cascader.spec.ts index 840fd8caac2..e535c90fe3d 100644 --- a/components/cascader/cascader.spec.ts +++ b/components/cascader/cascader.spec.ts @@ -41,6 +41,7 @@ import { NzCascaderModule } from './cascader.module'; import { NzCascaderExpandTrigger, NzCascaderOption, + NzCascaderPlacement, NzCascaderSize, NzCascaderTriggerType, NzShowSearchOptions @@ -1637,6 +1638,48 @@ describe('cascader', () => { expect(itemEl1?.querySelector('.anticon-home')).toBeTruthy(); expect(cascader.nativeElement.querySelector('.ant-select-arrow .anticon')!.classList).toContain('anticon-home'); }); + + it('should nzPlacement works', fakeAsync(() => { + fixture.detectChanges(); + testComponent.cascader.setMenuVisible(true); + fixture.detectChanges(); + let element = overlayContainerElement.querySelector('.ant-select-dropdown') as HTMLElement; + expect(element.classList.contains('ant-select-dropdown-placement-bottomLeft')).toBe(true); + expect(element.classList.contains('ant-select-dropdown-placement-bottomRight')).toBe(false); + expect(element.classList.contains('ant-select-dropdown-placement-topLeft')).toBe(false); + expect(element.classList.contains('ant-select-dropdown-placement-topRight')).toBe(false); + + const setNzPlacement = (placement: NzCascaderPlacement): void => { + testComponent.cascader.setMenuVisible(false); + fixture.detectChanges(); + testComponent.nzPlacement = placement; + testComponent.cascader.setMenuVisible(true); + fixture.detectChanges(); + tick(); + fixture.detectChanges(); + }; + + setNzPlacement('bottomRight'); + element = overlayContainerElement.querySelector('.ant-select-dropdown') as HTMLElement; + expect(element.classList.contains('ant-select-dropdown-placement-bottomLeft')).toBe(false); + expect(element.classList.contains('ant-select-dropdown-placement-bottomRight')).toBe(true); + expect(element.classList.contains('ant-select-dropdown-placement-topLeft')).toBe(false); + expect(element.classList.contains('ant-select-dropdown-placement-topRight')).toBe(false); + + setNzPlacement('topLeft'); + element = overlayContainerElement.querySelector('.ant-select-dropdown') as HTMLElement; + expect(element.classList.contains('ant-select-dropdown-placement-bottomLeft')).toBe(false); + expect(element.classList.contains('ant-select-dropdown-placement-bottomRight')).toBe(false); + expect(element.classList.contains('ant-select-dropdown-placement-topLeft')).toBe(true); + expect(element.classList.contains('ant-select-dropdown-placement-topRight')).toBe(false); + + setNzPlacement('topRight'); + element = overlayContainerElement.querySelector('.ant-select-dropdown') as HTMLElement; + expect(element.classList.contains('ant-select-dropdown-placement-bottomLeft')).toBe(false); + expect(element.classList.contains('ant-select-dropdown-placement-bottomRight')).toBe(false); + expect(element.classList.contains('ant-select-dropdown-placement-topLeft')).toBe(false); + expect(element.classList.contains('ant-select-dropdown-placement-topRight')).toBe(true); + })); }); describe('multiple', () => { @@ -2290,6 +2333,7 @@ const options5: NzSafeAny[] = []; [nzSuffixIcon]="nzSuffixIcon" [nzValueProperty]="nzValueProperty" [nzBackdrop]="nzBackdrop" + [nzPlacement]="nzPlacement" (ngModelChange)="onValueChanges($event)" (nzVisibleChange)="onVisibleChange($event)" (nzClear)="onClear()" @@ -2332,6 +2376,7 @@ export class NzDemoCascaderDefaultComponent { nzSuffixIcon = 'down'; nzExpandIcon = 'right'; nzBackdrop = false; + nzPlacement: NzCascaderPlacement = 'bottomLeft'; onVisibleChange = jasmine.createSpy<(visible: boolean) => void>('open change'); onValueChanges = jasmine.createSpy('value change'); diff --git a/components/cascader/demo/placement.md b/components/cascader/demo/placement.md new file mode 100644 index 00000000000..3b1c157bc9c --- /dev/null +++ b/components/cascader/demo/placement.md @@ -0,0 +1,14 @@ +--- +order: 18 +title: + zh-CN: 弹出位置 + en-US: Placement +--- + +## zh-CN + +可以通过 `nzPlacement` 手动指定弹出的位置。 + +## en-US + +You can manually specify the position of the popup via `nzPlacement`. diff --git a/components/cascader/demo/placement.ts b/components/cascader/demo/placement.ts new file mode 100644 index 00000000000..714ef0533c1 --- /dev/null +++ b/components/cascader/demo/placement.ts @@ -0,0 +1,66 @@ +import { Component } from '@angular/core'; + +import { NzCascaderModule, NzCascaderOption, NzCascaderPlacement } from 'ng-zorro-antd/cascader'; +import { NzSegmentedModule } from 'ng-zorro-antd/segmented'; + +const options: NzCascaderOption[] = [ + { + value: 'zhejiang', + label: 'Zhejiang', + children: [ + { + value: 'hangzhou', + label: 'Hangzhou', + children: [ + { + value: 'xihu', + label: 'West Lake', + isLeaf: true + } + ] + }, + { + value: 'ningbo', + label: 'Ningbo', + isLeaf: true + } + ] + }, + { + value: 'jiangsu', + label: 'Jiangsu', + children: [ + { + value: 'nanjing', + label: 'Nanjing', + children: [ + { + value: 'zhonghuamen', + label: 'Zhong Hua Men', + isLeaf: true + } + ] + } + ] + } +]; + +@Component({ + selector: 'nz-demo-cascader-placement', + imports: [NzCascaderModule, NzSegmentedModule], + template: ` + +
+
+ + ` +}) +export class NzDemoCascaderPlacementComponent { + nzOptions: NzCascaderOption[] = options; + placement: NzCascaderPlacement = 'topLeft'; + readonly placements: NzCascaderPlacement[] = ['topLeft', 'topRight', 'bottomLeft', 'bottomRight']; + + setPlacement(placement: string | number): void { + this.placement = placement as NzCascaderPlacement; + } +} diff --git a/components/cascader/demo/status.md b/components/cascader/demo/status.md index 89ddb627860..b22e12c226f 100644 --- a/components/cascader/demo/status.md +++ b/components/cascader/demo/status.md @@ -1,5 +1,5 @@ --- -order: 18 +order: 19 title: zh-CN: 自定义状态 en-US: Status diff --git a/components/cascader/doc/index.en-US.md b/components/cascader/doc/index.en-US.md index 6c1f1c11dec..471e7b78aa6 100755 --- a/components/cascader/doc/index.en-US.md +++ b/components/cascader/doc/index.en-US.md @@ -49,6 +49,7 @@ import { NzCascaderModule } from 'ng-zorro-antd/cascader'; | `[nzOptionRender]` | render template of cascader options | `TemplateRef<{ $implicit: NzCascaderOption, index: number }>` | | | `[nzOptions]` | data options of cascade | `object[]` | - | | `[nzPlaceHolder]` | input placeholder | `string` | `'Please select'` | +| `[nzPlacement]` | popup placement | `'bottomLeft' \| 'bottomRight' \| 'topLeft' \| 'topRight'` | `'bottomLeft'` | | `[nzShowArrow]` | whether show arrow | `boolean` | `true` | | `[nzShowInput]` | whether show input | `boolean` | `true` | | `[nzShowSearch]` | whether support search. Cannot be used with `[nzLoadData]` at the same time | `boolean\|NzShowSearchOptions` | `false` | diff --git a/components/cascader/doc/index.zh-CN.md b/components/cascader/doc/index.zh-CN.md index 1c7ffd97a52..fcfcd228c09 100755 --- a/components/cascader/doc/index.zh-CN.md +++ b/components/cascader/doc/index.zh-CN.md @@ -26,42 +26,43 @@ import { NzCascaderModule } from 'ng-zorro-antd/cascader'; ### nz-cascader -| 参数 | 说明 | 类型 | 默认值 | 支持全局配置 | -|-----------------------|---------------------------------------------------------|-----------------------------------------------------------------------|-------------|--------| -| `[ngModel]` | 指定选中项 | `any[]` | - | -| `[nzAllowClear]` | 是否支持清除 | `boolean` | `true` | -| `[nzAutoFocus]` | 是否自动聚焦，当存在输入框时 | `boolean` | `false` | -| `[nzBackdrop]` | 浮层是否应带有背景板 | `boolean` | `false` | -| `[nzChangeOn]` | 点击父级菜单选项时，可通过该函数判断是否允许值的变化 | `(option: any, index: number) => boolean` | - | -| `[nzChangeOnSelect]` | 当此项为 true 时，点选每级菜单选项值都会发生变化，具体见上面的演示 | `boolean` | `false` | -| `[nzColumnClassName]` | 自定义浮层列类名 | `string` | - | -| `[nzDisabled]` | 禁用 | `boolean` | `false` | -| `[nzExpandIcon]` | 自定义次级菜单展开图标 | `string\|TemplateRef` | - | -| `[nzExpandTrigger]` | 次级菜单的展开方式，可选 `'click'` 和 `'hover'` | `'click'\|'hover'` | `'click'` | -| `[nzLabelProperty]` | 选项的显示值的属性名 | `string` | `'label'` | -| `[nzLabelRender]` | 选择后展示的渲染模板 | `TemplateRef` | - | -| `[nzLoadData]` | 用于动态加载选项。如果提供了`ngModel`初始值，且未提供`nzOptions`值，则会立即触发动态加载。 | `(option: any, index?: index) => PromiseLike \| Observable` | - | -| `[nzMenuClassName]` | 自定义浮层类名 | `string` | - | -| `[nzMenuStyle]` | 自定义浮层样式 | `object` | - | -| `[nzMouseEnterDelay]` | 鼠标进入触发器后打开浮层的延迟时间（毫秒） | `number` | 150 | -| `[nzMouseLeaveDelay]` | 鼠标离开触发器后关闭浮层的延迟时间（毫秒） | `number` | 150 | -| `[nzMultiple]` | 是否支持多选 | `boolean` | `false` | -| `[nzNotFoundContent]` | 当下拉列表为空时显示的内容 | `string\|TemplateRef` | - | -| `[nzOptionRender]` | 选项的渲染模板 | `TemplateRef<{ $implicit: NzCascaderOption, index: number }>` | | -| `[nzOptions]` | 可选项数据源 | `object[]` | - | -| `[nzPlaceHolder]` | 输入框占位文本 | `string` | `'请选择'` | -| `[nzShowArrow]` | 是否显示箭头 | `boolean` | `true` | -| `[nzShowInput]` | 显示输入框 | `boolean` | `true` | -| `[nzShowSearch]` | 是否支持搜索，默认情况下对 `label` 进行全匹配搜索，不能和 `[nzLoadData]` 同时使用 | `boolean \| NzShowSearchOptions` | `false` | -| `[nzSize]` | 输入框大小，可选 `large` `default` `small` | `'large' \| 'small' \| 'default'` | `'default'` | ✅ | -| `[nzStatus]` | 设置校验状态 | `'error' \| 'warning'` | - | -| `[nzSuffixIcon]` | 自定义的选择框后缀图标 | `string \| TemplateRef` | - | -| `[nzValueProperty]` | 选项的实际值的属性名 | `string` | `'value'` | -| `(ngModelChange)` | 值发生变化时触发 | `EventEmitter` | - | -| `(nzClear)` | 清除值时触发 | `EventEmitter` | - | -| `(nzVisibleChange)` | 菜单浮层的显示/隐藏 | `EventEmitter` | - | -| `(nzRemoved)` | 多选模式下，移除值时触发 | `EventEmitter` | - | -| `(nzSelectionChange)` | 值发生变化时触发 | `EventEmitter` | - | +| 参数 | 说明 | 类型 | 默认值 | 支持全局配置 | +|-----------------------|---------------------------------------------------------|-----------------------------------------------------------------------|----------------|--------| +| `[ngModel]` | 指定选中项 | `any[]` | - | +| `[nzAllowClear]` | 是否支持清除 | `boolean` | `true` | +| `[nzAutoFocus]` | 是否自动聚焦，当存在输入框时 | `boolean` | `false` | +| `[nzBackdrop]` | 浮层是否应带有背景板 | `boolean` | `false` | +| `[nzChangeOn]` | 点击父级菜单选项时，可通过该函数判断是否允许值的变化 | `(option: any, index: number) => boolean` | - | +| `[nzChangeOnSelect]` | 当此项为 true 时，点选每级菜单选项值都会发生变化，具体见上面的演示 | `boolean` | `false` | +| `[nzColumnClassName]` | 自定义浮层列类名 | `string` | - | +| `[nzDisabled]` | 禁用 | `boolean` | `false` | +| `[nzExpandIcon]` | 自定义次级菜单展开图标 | `string\|TemplateRef` | - | +| `[nzExpandTrigger]` | 次级菜单的展开方式，可选 `'click'` 和 `'hover'` | `'click'\|'hover'` | `'click'` | +| `[nzLabelProperty]` | 选项的显示值的属性名 | `string` | `'label'` | +| `[nzLabelRender]` | 选择后展示的渲染模板 | `TemplateRef` | - | +| `[nzLoadData]` | 用于动态加载选项。如果提供了`ngModel`初始值，且未提供`nzOptions`值，则会立即触发动态加载。 | `(option: any, index?: index) => PromiseLike \| Observable` | - | +| `[nzMenuClassName]` | 自定义浮层类名 | `string` | - | +| `[nzMenuStyle]` | 自定义浮层样式 | `object` | - | +| `[nzMouseEnterDelay]` | 鼠标进入触发器后打开浮层的延迟时间（毫秒） | `number` | 150 | +| `[nzMouseLeaveDelay]` | 鼠标离开触发器后关闭浮层的延迟时间（毫秒） | `number` | 150 | +| `[nzMultiple]` | 是否支持多选 | `boolean` | `false` | +| `[nzNotFoundContent]` | 当下拉列表为空时显示的内容 | `string\|TemplateRef` | - | +| `[nzOptionRender]` | 选项的渲染模板 | `TemplateRef<{ $implicit: NzCascaderOption, index: number }>` | | +| `[nzOptions]` | 可选项数据源 | `object[]` | - | +| `[nzPlaceHolder]` | 输入框占位文本 | `string` | `'请选择'` | +| `[nzPlacement]` | 浮层弹出位置 | `'bottomLeft' \| 'bottomRight' \| 'topLeft' \| 'topRight'` | `'bottomLeft'` | +| `[nzShowArrow]` | 是否显示箭头 | `boolean` | `true` | +| `[nzShowInput]` | 显示输入框 | `boolean` | `true` | +| `[nzShowSearch]` | 是否支持搜索，默认情况下对 `label` 进行全匹配搜索，不能和 `[nzLoadData]` 同时使用 | `boolean \| NzShowSearchOptions` | `false` | +| `[nzSize]` | 输入框大小，可选 `large` `default` `small` | `'large' \| 'small' \| 'default'` | `'default'` | ✅ | +| `[nzStatus]` | 设置校验状态 | `'error' \| 'warning'` | - | +| `[nzSuffixIcon]` | 自定义的选择框后缀图标 | `string \| TemplateRef` | - | +| `[nzValueProperty]` | 选项的实际值的属性名 | `string` | `'value'` | +| `(ngModelChange)` | 值发生变化时触发 | `EventEmitter` | - | +| `(nzClear)` | 清除值时触发 | `EventEmitter` | - | +| `(nzVisibleChange)` | 菜单浮层的显示/隐藏 | `EventEmitter` | - | +| `(nzRemoved)` | 多选模式下，移除值时触发 | `EventEmitter` | - | +| `(nzSelectionChange)` | 值发生变化时触发 | `EventEmitter` | - | ### Interfaces diff --git a/components/cascader/typings.ts b/components/cascader/typings.ts index e5887244a85..075bf5d8000 100644 --- a/components/cascader/typings.ts +++ b/components/cascader/typings.ts @@ -16,6 +16,7 @@ export type NzCascaderSize = NzSizeLDSType; export type NzCascaderFilter = (searchValue: string, path: NzCascaderOption[]) => boolean; export type NzCascaderSorter = (a: NzCascaderOption[], b: NzCascaderOption[], inputValue: string) => number; +export type NzCascaderPlacement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight'; export interface NzCascaderOption { value?: NzSafeAny; diff --git a/components/core/overlay/overlay-position.ts b/components/core/overlay/overlay-position.ts index 6a67276c16b..5235dc876b9 100644 --- a/components/core/overlay/overlay-position.ts +++ b/components/core/overlay/overlay-position.ts @@ -48,9 +48,7 @@ export const DEFAULT_CASCADER_POSITIONS = [ POSITION_MAP.bottomLeft, POSITION_MAP.bottomRight, POSITION_MAP.topLeft, - POSITION_MAP.topRight, - POSITION_MAP.topCenter, - POSITION_MAP.bottomCenter + POSITION_MAP.topRight ]; export const DEFAULT_MENTION_TOP_POSITIONS = [ diff --git a/components/select/select.component.ts b/components/select/select.component.ts index 6cb70804f0e..e6fc6a8017d 100644 --- a/components/select/select.component.ts +++ b/components/select/select.component.ts @@ -170,10 +170,10 @@ export type NzSelectSizeType = NzSizeLDSType; [itemSize]="nzOptionHeightPx" [maxItemLength]="nzOptionOverflowSize" [matchWidth]="nzDropdownMatchSelectWidth" - [class.ant-select-dropdown-placement-bottomLeft]="dropDownPosition === 'bottomLeft'" - [class.ant-select-dropdown-placement-topLeft]="dropDownPosition === 'topLeft'" - [class.ant-select-dropdown-placement-bottomRight]="dropDownPosition === 'bottomRight'" - [class.ant-select-dropdown-placement-topRight]="dropDownPosition === 'topRight'" + [class.ant-select-dropdown-placement-bottomLeft]="dropdownPosition === 'bottomLeft'" + [class.ant-select-dropdown-placement-topLeft]="dropdownPosition === 'topLeft'" + [class.ant-select-dropdown-placement-bottomRight]="dropdownPosition === 'bottomRight'" + [class.ant-select-dropdown-placement-topRight]="dropdownPosition === 'topRight'" [@slideMotion]="'enter'" [@.disabled]="!!noAnimation?.nzNoAnimation" [nzNoAnimation]="noAnimation?.nzNoAnimation" @@ -311,7 +311,7 @@ export class NzSelectComponent implements ControlValueAccessor, OnInit, AfterCon onChange: OnChangeType = () => {}; onTouched: OnTouchedType = () => {}; - dropDownPosition: NzSelectPlacementType = 'bottomLeft'; + dropdownPosition: NzSelectPlacementType = 'bottomLeft'; triggerWidth: number | null = null; listOfContainerItem: NzSelectItemInterface[] = []; listOfTopItem: NzSelectItemInterface[] = []; @@ -566,7 +566,7 @@ export class NzSelectComponent implements ControlValueAccessor, OnInit, AfterCon onPositionChange(position: ConnectedOverlayPositionChange): void { const placement = getPlacementName(position); - this.dropDownPosition = placement as NzSelectPlacementType; + this.dropdownPosition = placement as NzSelectPlacementType; } updateCdkConnectedOverlayStatus(): void { @@ -677,7 +677,7 @@ export class NzSelectComponent implements ControlValueAccessor, OnInit, AfterCon } if (nzPlacement) { const { currentValue } = nzPlacement; - this.dropDownPosition = currentValue as NzSelectPlacementType; + this.dropdownPosition = currentValue as NzSelectPlacementType; const listOfPlacement = ['bottomLeft', 'topLeft', 'bottomRight', 'topRight']; if (currentValue && listOfPlacement.includes(currentValue)) { this.positions = [POSITION_MAP[currentValue as POSITION_TYPE]]; diff --git a/components/tree-select/tree-select.component.ts b/components/tree-select/tree-select.component.ts index cfee320b23e..5d5ac998b22 100644 --- a/components/tree-select/tree-select.component.ts +++ b/components/tree-select/tree-select.component.ts @@ -116,8 +116,8 @@ const listOfPositions = [ [class]="dropdownClassName" [@.disabled]="!!noAnimation?.nzNoAnimation" [nzNoAnimation]="noAnimation?.nzNoAnimation" - [class.ant-select-dropdown-placement-bottomLeft]="dropDownPosition === 'bottom'" - [class.ant-select-dropdown-placement-topLeft]="dropDownPosition === 'top'" + [class.ant-select-dropdown-placement-bottomLeft]="dropdownPosition === 'bottom'" + [class.ant-select-dropdown-placement-topLeft]="dropdownPosition === 'top'" [class.ant-tree-select-dropdown-rtl]="dir === 'rtl'" [dir]="dir" [style]="nzDropdownStyle" @@ -337,7 +337,7 @@ export class NzTreeSelectComponent extends NzTreeBase implements ControlValueAcc isNotFound = false; focused = false; inputValue = ''; - dropDownPosition: 'top' | 'center' | 'bottom' = 'bottom'; + dropdownPosition: 'top' | 'center' | 'bottom' = 'bottom'; selectedNodes: NzTreeNode[] = []; expandedKeys: string[] = []; value: string[] = []; @@ -700,7 +700,7 @@ export class NzTreeSelectComponent extends NzTreeBase implements ControlValueAcc } onPositionChange(position: ConnectedOverlayPositionChange): void { - this.dropDownPosition = position.connectionPair.originY; + this.dropdownPosition = position.connectionPair.originY; } onClearSelection(): void {