feat(typeahead) stop selecting first result when displaying matches (v…

…alor-software#3983) * docs(typeahead) Add min length example to docs * chore(typeahead) Fix typo * chore(typeahead) incorrect comment * feat(typeahead) stop selecting first result when displaying matches Switches from always setting the first result to be the active one, and instead initially displays the result list with no active item. After the pressing down/up keys the first/last item will be selected. Also cleans up the keyboard interaction when alternating between navigating between matches with arrow keys and typing additional characters, by keeping the previous match selected if it continues to be a match with the new results, instead of the previous behavior of resetting to the first item selected. Closes valor-software#3965 * fix(typeahead): clean up * fix(typeahead): fix unit tests
leo6104 · Oct 10, 2019 · aea2cc6 · aea2cc6
1 parent 5460cc3
commit aea2cc6
Show file tree

Hide file tree

Showing 11 changed files with 293 additions and 31 deletions.
diff --git a/demo/src/app/components/+typeahead/demos/first-item-active/first-item-active.html b/demo/src/app/components/+typeahead/demos/first-item-active/first-item-active.html
@@ -0,0 +1,5 @@
+<pre class="card card-block card-header mb-3">Model: {{selected | json}}</pre>
+<input [(ngModel)]="selected"
+       [typeahead]="states"
+       [typeaheadIsFirstItemActive]="false"
+       class="form-control">
diff --git a/demo/src/app/components/+typeahead/demos/first-item-active/first-item-active.ts b/demo/src/app/components/+typeahead/demos/first-item-active/first-item-active.ts
@@ -0,0 +1,61 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-typeahead-first-item-active',
+  templateUrl: './first-item-active.html'
+})
+export class DemoTypeaheadFirstItemActiveComponent {
+  selected: string;
+  states: string[] = [
+    'Alabama',
+    'Alaska',
+    'Arizona',
+    'Arkansas',
+    'California',
+    'Colorado',
+    'Connecticut',
+    'Delaware',
+    'Florida',
+    'Georgia',
+    'Hawaii',
+    'Idaho',
+    'Illinois',
+    'Indiana',
+    'Iowa',
+    'Kansas',
+    'Kentucky',
+    'Louisiana',
+    'Maine',
+    'Maryland',
+    'Massachusetts',
+    'Michigan',
+    'Minnesota',
+    'Mississippi',
+    'Missouri',
+    'Montana',
+    'Nebraska',
+    'Nevada',
+    'New Hampshire',
+    'New Jersey',
+    'New Mexico',
+    'New York',
+    'North Dakota',
+    'North Carolina',
+    'Ohio',
+    'Oklahoma',
+    'Oregon',
+    'Pennsylvania',
+    'Rhode Island',
+    'South Carolina',
+    'South Dakota',
+    'Tennessee',
+    'Texas',
+    'Utah',
+    'Vermont',
+    'Virginia',
+    'Washington',
+    'West Virginia',
+    'Wisconsin',
+    'Wyoming'
+  ];
+}
diff --git a/demo/src/app/components/+typeahead/demos/index.ts b/demo/src/app/components/+typeahead/demos/index.ts
@@ -6,10 +6,12 @@ import { DemoTypeaheadContainerComponent } from './container/container';
 import { DemoTypeaheadDelayComponent } from './delay/delay';
 import { DemoTypeaheadDropupComponent } from './dropup/dropup';
 import { DemoTypeaheadFieldComponent } from './field/field';
+import { DemoTypeaheadFirstItemActiveComponent } from './first-item-active/first-item-active';
 import { DemoTypeaheadFormComponent } from './form/form';
 import { DemoTypeaheadGroupingComponent } from './grouping/grouping';
 import { DemoTypeaheadItemTemplateComponent } from './item-template/item-template';
 import { DemoTypeaheadLatinizeComponent } from './latinize/latinize';
+import { DemoTypeaheadMinLengthComponent } from './min-length/min-length';
 import { DemoTypeaheadNoResultComponent } from './no-result/no-result';
 import { DemoTypeaheadOnBlurComponent } from './on-blur/on-blur';
 import { DemoTypeaheadOnSelectComponent } from './on-select/on-select';
@@ -29,10 +31,12 @@ export const DEMO_COMPONENTS = [
   DemoTypeaheadDelayComponent,
   DemoTypeaheadDropupComponent,
   DemoTypeaheadFieldComponent,
+  DemoTypeaheadFirstItemActiveComponent,
   DemoTypeaheadFormComponent,
   DemoTypeaheadGroupingComponent,
   DemoTypeaheadItemTemplateComponent,
   DemoTypeaheadLatinizeComponent,
+  DemoTypeaheadMinLengthComponent,
   DemoTypeaheadNoResultComponent,
   DemoTypeaheadOnBlurComponent,
   DemoTypeaheadOnSelectComponent,

diff --git a/demo/src/app/components/+typeahead/demos/min-length/min-length.html b/demo/src/app/components/+typeahead/demos/min-length/min-length.html
@@ -0,0 +1,5 @@
+<pre class="card card-block card-header mb-3">Model: {{selected | json}}</pre>
+<input [(ngModel)]="selected"
+       [typeahead]="states"
+       [typeaheadMinLength]="0"
+       class="form-control">
diff --git a/demo/src/app/components/+typeahead/demos/min-length/min-length.ts b/demo/src/app/components/+typeahead/demos/min-length/min-length.ts
@@ -0,0 +1,61 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-typeahead-min-length',
+  templateUrl: './min-length.html'
+})
+export class DemoTypeaheadMinLengthComponent {
+  selected: string;
+  states: string[] = [
+    'Alabama',
+    'Alaska',
+    'Arizona',
+    'Arkansas',
+    'California',
+    'Colorado',
+    'Connecticut',
+    'Delaware',
+    'Florida',
+    'Georgia',
+    'Hawaii',
+    'Idaho',
+    'Illinois',
+    'Indiana',
+    'Iowa',
+    'Kansas',
+    'Kentucky',
+    'Louisiana',
+    'Maine',
+    'Maryland',
+    'Massachusetts',
+    'Michigan',
+    'Minnesota',
+    'Mississippi',
+    'Missouri',
+    'Montana',
+    'Nebraska',
+    'Nevada',
+    'New Hampshire',
+    'New Jersey',
+    'New Mexico',
+    'New York',
+    'North Dakota',
+    'North Carolina',
+    'Ohio',
+    'Oklahoma',
+    'Oregon',
+    'Pennsylvania',
+    'Rhode Island',
+    'South Carolina',
+    'South Dakota',
+    'Tennessee',
+    'Texas',
+    'Utah',
+    'Vermont',
+    'Virginia',
+    'Washington',
+    'West Virginia',
+    'Wisconsin',
+    'Wyoming'
+  ];
+}
diff --git a/demo/src/app/components/+typeahead/typeahead-section.list.ts b/demo/src/app/components/+typeahead/typeahead-section.list.ts
@@ -1,3 +1,6 @@
+import { ApiSectionsComponent } from '../../docs/demo-section-components/demo-api-section';
+import { ContentSection } from '../../docs/models/content-section.model';
+import { DemoTopSectionComponent } from '../../docs/demo-section-components/demo-top-section';
 import { DemoTypeaheadAdaptivePositionComponent } from './demos/adaptive-position/adaptive-position';
 import { DemoTypeaheadAsyncComponent } from './demos/async/async';
 import { DemoTypeaheadBasicComponent } from './demos/basic/basic';
@@ -10,6 +13,7 @@ import { DemoTypeaheadFormComponent } from './demos/form/form';
 import { DemoTypeaheadGroupingComponent } from './demos/grouping/grouping';
 import { DemoTypeaheadItemTemplateComponent } from './demos/item-template/item-template';
 import { DemoTypeaheadLatinizeComponent } from './demos/latinize/latinize';
+import { DemoTypeaheadMinLengthComponent } from './demos/min-length/min-length';
 import { DemoTypeaheadNoResultComponent } from './demos/no-result/no-result';
 import { DemoTypeaheadOnBlurComponent } from './demos/on-blur/on-blur';
 import { DemoTypeaheadOnSelectComponent } from './demos/on-select/on-select';
@@ -19,13 +23,10 @@ import { DemoTypeaheadScrollableComponent } from './demos/scrollable/scrollable'
 import { DemotypeaheadSelectFirstItemComponent } from './demos/selected-first-item/selected-first-item';
 import { DemoTypeaheadShowOnBlurComponent } from './demos/show-on-blur/show-on-blur';
 import { DemoTypeaheadSingleWorldComponent } from './demos/single-world/single-world';
-
-import { ApiSectionsComponent } from '../../docs/demo-section-components/demo-api-section';
-import { ContentSection } from '../../docs/models/content-section.model';
-import { DemoTopSectionComponent } from '../../docs/demo-section-components/demo-top-section';
 import { ExamplesComponent } from '../../docs/demo-section-components/demo-examples-section';
 
 import { NgApiDocComponent, NgApiDocConfigComponent } from '../../docs/api-docs';
+import { DemoTypeaheadFirstItemActiveComponent } from './demos/first-item-active/first-item-active';
 
 export const demoComponentContent: ContentSection[] = [
   {
@@ -210,6 +211,16 @@ export const demoComponentContent: ContentSection[] = [
         html: require('!!raw-loader?lang=markup!./demos/on-select/on-select.html'),
         outlet: DemoTypeaheadOnSelectComponent
       },
+      {
+        title: 'Min length',
+        anchor: 'min-length',
+        description: `
+          <p>Minimal number of characters that needs to be entered before typeahead kicks in. When set to 0, typeahead shows on focus with full list of options.</p>
+        `,
+        component: require('!!raw-loader?lang=typescript!./demos/min-length/min-length.ts'),
+        html: require('!!raw-loader?lang=markup!./demos/min-length/min-length.html'),
+        outlet: DemoTypeaheadMinLengthComponent
+      },
       {
         title: 'Show results on blur',
         anchor: 'show-on-blur',
@@ -227,12 +238,22 @@ export const demoComponentContent: ContentSection[] = [
         component: require('!!raw-loader?lang=typescript!./demos/config/config'),
         html: require('!!raw-loader?lang=markup!./demos/config/config.html'),
         outlet: DemoTypeaheadConfigComponent
-      }, {
+      },
+      {
+        title: 'Is first item active',
+        anchor: 'first-item-active',
+        description: `
+          <p>Use input property <code>typeaheadIsFirstItemActive</code> or config property <code>isFirstItemActive</code> to make the first item active/inactive </p>
+        `,
+        component: require('!!raw-loader?lang=typescript!./demos/first-item-active/first-item-active.ts'),
+        html: require('!!raw-loader?lang=markup!./demos/first-item-active/first-item-active.html'),
+        outlet: DemoTypeaheadFirstItemActiveComponent
+      },
+      {
         title: 'Selected first item',
         anchor: 'selected-first-item',
         description: `
-          <p>Use <code>typeaheadSelectFirstItem</code> property to make first item in 
-          option list is chosen by default.</p>
+          <p>Use <code>typeaheadSelectFirstItem</code> property to make the first item in options list unselectable by tab and enter.</p>
         `,
         component: require('!!raw-loader?lang=typescript!./demos/selected-first-item/selected-first-item.ts'),
         html: require('!!raw-loader?lang=markup!./demos/selected-first-item/selected-first-item.html'),

diff --git a/demo/src/ng-api-doc.ts b/demo/src/ng-api-doc.ts
@@ -1975,7 +1975,7 @@ export const ngdoc: any = {
     "properties": [
       {
         "name": "dropdownMenu",
-        "type": "Promise<any>",
+        "type": "Promise<BsComponentRef<any>>",
         "description": "<p>Content to be displayed as popover.</p>\n"
       }
     ]
@@ -2570,6 +2570,13 @@ export const ngdoc: any = {
     "methods": [],
     "properties": []
   },
+  "Options": {
+    "fileName": "src/positioning/models/index.ts",
+    "className": "Options",
+    "description": "",
+    "methods": [],
+    "properties": []
+  },
   "PositioningOptions": {
     "fileName": "src/positioning/positioning.service.ts",
     "className": "PositioningOptions",
@@ -2919,7 +2926,7 @@ export const ngdoc: any = {
       },
       {
         "name": "selectTab",
-        "description": "<p>fired when tab became active, $event:Tab equals to selected instance of Tab component </p>\n"
+        "description": "<p>fired when tab became active, $event:Tab equals to selected instance of Tab component</p>\n"
       }
     ],
     "properties": [],
@@ -3403,6 +3410,12 @@ export const ngdoc: any = {
         "type": "boolean",
         "description": "<p>used to hide results on blur</p>\n"
       },
+      {
+        "name": "isFirstItemActive",
+        "defaultValue": "true",
+        "type": "boolean",
+        "description": "<p>used to active/inactive the first item in typeahead container</p>\n"
+      },
       {
         "name": "minLength",
         "defaultValue": "1",
@@ -3465,6 +3478,12 @@ export const ngdoc: any = {
         "type": "boolean",
         "description": "<p>used to hide result on blur</p>\n"
       },
+      {
+        "name": "typeaheadIsFirstItemActive",
+        "defaultValue": "true",
+        "type": "boolean",
+        "description": "<p>makes active first item in a list</p>\n"
+      },
       {
         "name": "typeaheadItemTemplate",
         "type": "TemplateRef<any>",