feat(typeahead): fix for bs4-alfa.6 template

fixes #1494
valor-software · Jan 13, 2017 · 3fb6e38 · 3fb6e38
1 parent 77d79ab
commit 3fb6e38
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 21 deletions.
diff --git a/demo/src/index-bs4.html b/demo/src/index-bs4.html
@@ -13,7 +13,7 @@
   <link href="https://fonts.googleapis.com/css?family=Roboto:400,300,700" rel="stylesheet" type="text/css">
 
   <!--link to bootstrap.css v4.0.0-alpha-->
-  <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet">
+  <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
   <!--<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">-->
   <link rel="stylesheet" href="assets/css/glyphicons.css">
   <link rel="stylesheet" href="assets/css/style.css">

diff --git a/demo/src/index.html b/demo/src/index.html
@@ -16,6 +16,8 @@
   <!--<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">-->
 
   <!--link to bootstrap.css-->
+  <!--<script>window.__theme = 'bs4';</script>-->
+  <!--<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">-->
   <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   <link rel="stylesheet" href="assets/css/style.css">
   <link rel="stylesheet" href="assets/css/prettify-angulario.css">

diff --git a/src/typeahead/typeahead-container.component.ts b/src/typeahead/typeahead-container.component.ts
@@ -1,5 +1,5 @@
 import {
-  Component, ElementRef, TemplateRef, ViewEncapsulation
+  Component, ElementRef, TemplateRef, ViewEncapsulation, HostListener
 } from '@angular/core';
 import { isBs3 } from '../utils/ng2-bootstrap-config';
 import { TypeaheadUtils } from './typeahead-utils';
@@ -10,8 +10,7 @@ import { TypeaheadMatch } from './typeahead-match.class';
   selector: 'typeahead-container',
   // tslint:disable-next-line
   template: `
-  <template [ngIf]="!isBs4"><ul class="dropdown-menu"
-      (mouseleave)="focusLost()">
+  <template [ngIf]="!isBs4"><ul class="dropdown-menu">
     <template ngFor let-match let-i="index" [ngForOf]="matches">
       <li *ngIf="match.isHeader()" class="dropdown-header">{{match}}</li>
       <li *ngIf="!match.isHeader()"
@@ -33,34 +32,38 @@ import { TypeaheadMatch } from './typeahead-match.class';
       </li>
     </template>
   </ul></template>
-  <template [ngIf]="isBs4"><div class="dropdown-menu"
-       (mouseleave)="focusLost()">
+  <template [ngIf]="isBs4">
     <template ngFor let-match let-i="index" [ngForOf]="matches">
        <h6 *ngIf="match.isHeader()" class="dropdown-header">{{match}}</h6>
-       <div *ngIf="!match.isHeader() && !itemTemplate">
-          <a href="#"
+       <template [ngIf]="!match.isHeader() && !itemTemplate">
+          <button
             class="dropdown-item"
             (click)="selectMatch(match, $event)"
             (mouseenter)="selectActive(match)"
             [class.active]="isActive(match)"
-            [innerHtml]="hightlight(match, query)"></a>
-      </div>
-      <div *ngIf="!match.isHeader() && itemTemplate">
-        <a href="#"
-         class="dropdown-item"
-         (click)="selectMatch(match, $event)"
-         (mouseenter)="selectActive(match)"
-         [class.active]="isActive(match)">
+            [innerHtml]="hightlight(match, query)"></button>
+      </template>
+      <template [ngIf]="!match.isHeader() && itemTemplate">
+        <button
+           class="dropdown-item"
+           (click)="selectMatch(match, $event)"
+           (mouseenter)="selectActive(match)"
+           [class.active]="isActive(match)">
           <template [ngTemplateOutlet]="itemTemplate"
                     [ngOutletContext]="{item: match.item, index: i}">
           </template>
-         </a>
-      </div>
+         </button>
+      </template>
     </template>
-  </div></template>
+  </template>
 `,
-  // tslint:disable-next-line
-  host: {'class': 'dropdown open', style: 'position: absolute;' },
+  // tslint:disable
+  host: {
+    'class': 'dropdown open',
+    '[class.dropdown-menu]':'isBs4',
+    style: 'position: absolute;display: block;'
+  },
+  // tslint: enable
   encapsulation: ViewEncapsulation.None
 })
 export class TypeaheadContainerComponent {
@@ -163,6 +166,7 @@ export class TypeaheadContainerComponent {
     return itemStr;
   }
 
+  @HostListener('blur')
   public focusLost(): void {
     this.isFocused = false;
   }