fix(module:select & module:table): fix table style error & select err…

…or (NG-ZORRO#2987) close NG-ZORRO#2983
Ricbet · Apr 9, 2020 · 1445a2c · 1445a2c
1 parent 7faee0e
commit 1445a2c
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 127 deletions.
diff --git a/components/core/style/index.less b/components/core/style/index.less
@@ -110,6 +110,12 @@
   background: @component-background;
 }
 
+.ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-header > table > .ant-table-thead > tr > th ,.ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-thead > tr > th {
+  &.ant-table-th-left-sticky, &.ant-table-th-right-sticky {
+    background: @component-background;
+  }
+}
+
 .ant-table-tbody {
   & > tr {
     &:hover {
@@ -126,6 +132,10 @@
   }
 }
 
+.ant-table-thead > tr > th .ant-table-column-sorters > nz-dropdown {
+  position: static !important;
+}
+
 .ant-table-scroll-position-middle {
   .box-shadow-right;
   .box-shadow-left;
@@ -205,6 +215,7 @@ textarea.cdk-textarea-autosize-measuring {
       animation: none;
       transition: none;
     }
+
     & > * {
       transition: none;
     }
@@ -214,6 +225,7 @@ textarea.cdk-textarea-autosize-measuring {
   .ant-modal-mask, .ant-modal {
     animation: none;
     transition: none;
+
     &.zoom-enter, &.zoom-leave,
     &.zoom-enter-active, &.zoom-leave-active {
       animation: none;
@@ -224,11 +236,14 @@ textarea.cdk-textarea-autosize-measuring {
   // menu
   &.ant-menu {
     transition: none;
+
     .ant-menu-item, .ant-menu-submenu-title {
       transition: none;
     }
+
     .ant-menu-item .anticon, .ant-menu-submenu-title .anticon {
       transition: none;
+
       & + span {
         transition: none;
       }

diff --git a/components/dropdown/nz-dropdown.directive.ts b/components/dropdown/nz-dropdown.directive.ts
@@ -1,6 +1,6 @@
 import { Directive, ElementRef, Renderer2 } from '@angular/core';
 import { fromEvent, merge, Observable } from 'rxjs';
-import { mapTo } from 'rxjs/operators';
+import { mapTo, tap } from 'rxjs/operators';
 
 @Directive({
   selector: '[nz-dropdown]'
@@ -11,7 +11,7 @@ export class NzDropDownDirective {
     fromEvent(this.el, 'mouseenter').pipe(mapTo(true)),
     fromEvent(this.el, 'mouseleave').pipe(mapTo(false))
   );
-  $click: Observable<boolean> = fromEvent(this.el, 'click').pipe(mapTo(true));
+  $click: Observable<boolean> = fromEvent(this.el, 'click').pipe(tap(e => e.stopPropagation()), mapTo(true));
 
   setDisabled(disabled: boolean): void {
     if (disabled) {

diff --git a/components/select/nz-select-top-control.component.html b/components/select/nz-select-top-control.component.html
@@ -17,16 +17,14 @@
   <!--single mode-->
   <ng-container *ngIf="nzSelectService.isSingleMode">
     <!--selected label-->
-    <div
-      *ngIf="nzSelectService.listOfSelectedValue.length"
+    <div *ngIf="nzSelectService.listOfCachedSelectedOption.length && nzSelectService.listOfSelectedValue.length"
       class="ant-select-selection-selected-value"
-      [attr.title]="nzSelectService.listOfCachedSelectedOption[0].nzLabel"
+      [attr.title]="nzSelectService.listOfCachedSelectedOption[0]?.nzLabel"
       [ngStyle]="selectedValueStyle">
-      {{ nzSelectService.listOfCachedSelectedOption[0].nzLabel }}
+      {{ nzSelectService.listOfCachedSelectedOption[0]?.nzLabel }}
     </div>
     <!--show search-->
-    <div
-      *ngIf="nzShowSearch"
+    <div *ngIf="nzShowSearch"
       class="ant-select-search ant-select-search--inline">
       <div class="ant-select-search__field__wrap">
         <ng-template [ngTemplateOutlet]="inputTemplate"></ng-template>

diff --git a/rollup.config.js b/rollup.config.js
diff --git a/scripts/site/_site/doc/index.html b/scripts/site/_site/doc/index.html
@@ -15,7 +15,6 @@
     <meta name="theme-color" content="#ffffff">
     <title>NG-ZORRO - Ant Design Of Angular</title>
     <base href="/">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>
     <!-- Hotjar Tracking Code for ng.ant.design -->
     <script>
       (function(h,o,t,j,a,r){