feat(dropdown): add keyboard navigation support (#2683)

Allow opening dropdown and navigate between items marked with `ngbDropdownItem` using keyboard arrow keys.

demo/src/app/components/dropdown/demos/basic/dropdown-basic.html

@@ -3,9 +3,9 @@
     <div ngbDropdown class="d-inline-block">
       <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
       <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
-        <button class="dropdown-item">Action - 1</button>
-        <button class="dropdown-item">Another Action</button>
-        <button class="dropdown-item">Something else is here</button>
+        <button ngbDropdownItem>Action - 1</button>
+        <button ngbDropdownItem>Another Action</button>
+        <button ngbDropdownItem>Something else is here</button>
       </div>
     </div>
   </div>
@@ -14,9 +14,9 @@
     <div ngbDropdown placement="top-right" class="d-inline-block">
       <button class="btn btn-outline-primary" id="dropdownBasic2" ngbDropdownToggle>Toggle dropup</button>
       <div ngbDropdownMenu aria-labelledby="dropdownBasic2">
-        <button class="dropdown-item">Action - 1</button>
-        <button class="dropdown-item">Another Action</button>
-        <button class="dropdown-item">Something else is here</button>
+        <button ngbDropdownItem>Action - 1</button>
+        <button ngbDropdownItem>Another Action</button>
+        <button ngbDropdownItem>Something else is here</button>
       </div>
     </div>
   </div>

demo/src/app/components/dropdown/demos/config/dropdown-config.html

@@ -3,8 +3,8 @@
 <div ngbDropdown>
   <button class="btn btn-outline-primary" id="dropdownConfig" ngbDropdownToggle>Toggle</button>
   <div ngbDropdownMenu aria-labelledby="dropdownConfig">
-    <button class="dropdown-item">Action - 1</button>
-    <button class="dropdown-item">Another Action</button>
-    <button class="dropdown-item">Something else is here</button>
+    <button ngbDropdownItem>Action - 1</button>
+    <button ngbDropdownItem>Another Action</button>
+    <button ngbDropdownItem>Something else is here</button>
   </div>
 </div>

demo/src/app/components/dropdown/demos/form/dropdown-form.html

@@ -0,0 +1,29 @@
+<div class="row">
+  <div class="col">
+    <div ngbDropdown class="d-inline-block" autoClose="outside">
+      <button class="btn btn-outline-primary" id="dropdownForm1" ngbDropdownToggle>Toggle dropdown</button>
+      <div ngbDropdownMenu aria-labelledby="dropdownForm1">
+        <form class="px-4 py-3">
+          <div class="form-group">
+            <label for="exampleDropdownFormEmail1">Email address</label>
+            <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
+          </div>
+          <div class="form-group">
+            <label for="exampleDropdownFormPassword1">Password</label>
+            <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
+          </div>
+          <div class="form-check">
+            <input type="checkbox" class="form-check-input" id="dropdownCheck">
+            <label class="form-check-label" for="dropdownCheck">
+              Remember me
+            </label>
+          </div>
+          <button type="submit" class="btn btn-primary">Sign in</button>
+        </form>
+        <div class="dropdown-divider"></div>
+        <button ngbDropdownItem>New around here? Sign up</button>
+        <button ngbDropdownItem>Forgot password?</button>
+      </div>
+    </div>
+  </div>
+</div>

demo/src/app/components/dropdown/demos/form/dropdown-form.ts

@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'ngbd-dropdown-form',
+  templateUrl: './dropdown-form.html'
+})
+export class NgbdDropdownForm {
+}

demo/src/app/components/dropdown/demos/manual/dropdown-manual.html

@@ -3,9 +3,9 @@
 <div class="d-inline-block" ngbDropdown #myDrop="ngbDropdown">
   <button class="btn btn-outline-primary mr-2" id="dropdownManual" ngbDropdownAnchor (focus)="myDrop.open()">Toggle dropdown</button>
   <div ngbDropdownMenu aria-labelledby="dropdownManual">
-    <button class="dropdown-item">Action - 1</button>
-    <button class="dropdown-item">Another Action</button>
-    <button class="dropdown-item">Something else is here</button>
+    <button ngbDropdownItem>Action - 1</button>
+    <button ngbDropdownItem>Another Action</button>
+    <button ngbDropdownItem>Something else is here</button>
   </div>
 
   <button class="btn btn-outline-success mr-2" (click)="$event.stopPropagation(); myDrop.open();">Open from outside</button>

demo/src/app/components/dropdown/demos/split/dropdown-split.html

@@ -5,9 +5,9 @@
   <div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
     <button class="btn btn-outline-primary" ngbDropdownToggle>Drop me</button>
     <div class="dropdown-menu" ngbDropdownMenu>
-      <button class="dropdown-item">One</button>
-      <button class="dropdown-item">Two</button>
-      <button class="dropdown-item">Four!</button>
+      <button ngbDropdownItem>One</button>
+      <button ngbDropdownItem>Two</button>
+      <button ngbDropdownItem>Four!</button>
     </div>
   </div>
 </div>
@@ -17,9 +17,9 @@
   <div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
     <button class="btn btn-primary dropdown-toggle-split" ngbDropdownToggle></button>
     <div class="dropdown-menu" ngbDropdownMenu>
-      <button class="dropdown-item">One</button>
-      <button class="dropdown-item">Two</button>
-      <button class="dropdown-item">Four!</button>
+      <button ngbDropdownItem>One</button>
+      <button ngbDropdownItem>Two</button>
+      <button ngbDropdownItem>Four!</button>
     </div>
   </div>
 </div>
@@ -28,17 +28,17 @@
   <div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
     <button class="btn btn-outline-danger" ngbDropdownToggle>Select me</button>
     <div class="dropdown-menu" ngbDropdownMenu>
-      <button class="dropdown-item">One</button>
-      <button class="dropdown-item">Two</button>
-      <button class="dropdown-item">Four!</button>
+      <button ngbDropdownItem>One</button>
+      <button ngbDropdownItem>Two</button>
+      <button ngbDropdownItem>Four!</button>
     </div>
   </div>
   <div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
     <button class="btn btn-outline-success" ngbDropdownToggle>Or me</button>
     <div class="dropdown-menu" ngbDropdownMenu>
-      <button class="dropdown-item">One</button>
-      <button class="dropdown-item">Two</button>
-      <button class="dropdown-item">Four!</button>
+      <button ngbDropdownItem>One</button>
+      <button ngbDropdownItem>Two</button>
+      <button ngbDropdownItem>Four!</button>
     </div>
   </div>
 </div>

demo/src/app/components/dropdown/dropdown.module.ts

@@ -9,12 +9,14 @@ import { NgbdDropdownBasic } from './demos/basic/dropdown-basic';
 import { NgbdDropdownConfig } from './demos/config/dropdown-config';
 import { NgbdDropdownManual } from './demos/manual/dropdown-manual';
 import { NgbdDropdownSplit } from './demos/split/dropdown-split';
+import { NgbdDropdownForm } from './demos/form/dropdown-form';
 
 const DEMO_DIRECTIVES = [
   NgbdDropdownBasic,
   NgbdDropdownConfig,
   NgbdDropdownManual,
-  NgbdDropdownSplit
+  NgbdDropdownSplit,
+  NgbdDropdownForm
 ];
 
 const DEMOS = {
@@ -36,6 +38,12 @@ const DEMOS = {
     code: require('!!raw-loader!./demos/split/dropdown-split'),
     markup: require('!!raw-loader!./demos/split/dropdown-split.html')
   },
+  form: {
+    title: 'Mixed menu items and form',
+    type: NgbdDropdownForm,
+    code: require('!!raw-loader!./demos/form/dropdown-form'),
+    markup: require('!!raw-loader!./demos/form/dropdown-form.html')
+  },
   config: {
     title: 'Global configuration of dropdowns',
     type: NgbdDropdownConfig,

src/dropdown/dropdown.module.ts

@@ -1,10 +1,10 @@
 import {NgModule, ModuleWithProviders} from '@angular/core';
-import {NgbDropdown, NgbDropdownAnchor, NgbDropdownToggle, NgbDropdownMenu} from './dropdown';
+import {NgbDropdown, NgbDropdownAnchor, NgbDropdownToggle, NgbDropdownMenu, NgbDropdownItem} from './dropdown';
 
-export {NgbDropdown, NgbDropdownAnchor, NgbDropdownToggle, NgbDropdownMenu} from './dropdown';
+export {NgbDropdown, NgbDropdownAnchor, NgbDropdownToggle, NgbDropdownMenu, NgbDropdownItem} from './dropdown';
 export {NgbDropdownConfig} from './dropdown-config';
 
-const NGB_DROPDOWN_DIRECTIVES = [NgbDropdown, NgbDropdownAnchor, NgbDropdownToggle, NgbDropdownMenu];
+const NGB_DROPDOWN_DIRECTIVES = [NgbDropdown, NgbDropdownAnchor, NgbDropdownToggle, NgbDropdownMenu, NgbDropdownItem];
 
 @NgModule({declarations: NGB_DROPDOWN_DIRECTIVES, exports: NGB_DROPDOWN_DIRECTIVES})
 export class NgbDropdownModule {