fix(Select): shift+arrow will select multiple

ISSUES CLOSED: #1227
GetTerminus · Mar 15, 2019 · 89651e7 · 89651e7
1 parent c475b36
commit 89651e7
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 40 deletions.
diff --git a/terminus-ui/select/src/select.component.spec.ts b/terminus-ui/select/src/select.component.spec.ts
@@ -1,12 +1,10 @@
 import {
-  Provider,
   Type,
 } from '@angular/core';
 import {
   async,
   ComponentFixture,
   fakeAsync,
-  TestBed,
   tick,
 } from '@angular/core/testing';
 import {
@@ -51,13 +49,11 @@ import {
   getSelectElement,
   getSelectInstance,
   getSelectTriggerElement,
-  getToggleAllElement,
   openSelect,
 } from '@terminus/ui/select/testing';
 import { getValidationMessageElement } from '@terminus/ui/validation-messages/testing';
 
-import { TsSelectOptionComponent } from './option/option.component';
-import { TsSelectFormatFn, TsSelectModule, TsSelectOption } from './select.module';
+import { TsSelectFormatFn, TsSelectModule } from './select.module';
 
 
 function createComponent<T>(component: Type<T>): ComponentFixture<T> {
@@ -674,36 +670,38 @@ describe(`TsSelectComponent`, function() {
       });
 
 
-      // TODO: Shift/Arrow functionality does not seem to be working
-      // https://github.com/GetTerminus/terminus-ui/issues/1227
-/*
- *      test(`should select the next item with SHIFT+ARROW`, function() {
- *        const fixture = createComponent(testComponents.NoGroupsMultiple);
- *        fixture.detectChanges();
- *        const instance = getSelectInstance(fixture);
- *        const element = getSelectElement(fixture);
- *        instance.open();
- *        fixture.detectChanges();
- *        const eventDown = createKeydownEvent('ArrowDown', DOWN_ARROW);
- *
- *        // Move focus past disabled item for testing ease
- *        element.dispatchEvent(eventDown);
- *        element.dispatchEvent(eventDown);
- *        element.dispatchEvent(eventDown);
- *        fixture.detectChanges();
- *        console.log('TEST: instance.manager.activeItem: ', instance['keyManager'].activeItem!.viewValue);
- *
- *        const event = createKeydownEvent('ArrowDown', DOWN_ARROW);
- *        Object.defineProperty(event, 'shiftKey', {get: () => true});
- *
- *        element.dispatchEvent(event);
- *        fixture.detectChanges();
- *        fixture.detectChanges();
- *
- *        expect(instance.value).toEqual(['Florida']);
- *      });
- */
+      test(`should select the next item with SHIFT+ARROW`, function() {
+        const fixture = createComponent(testComponents.NoGroupsMultiple);
+        fixture.detectChanges();
+        const instance = getSelectInstance(fixture);
+        const element = getSelectElement(fixture);
+        instance.open();
+        fixture.detectChanges();
+        const eventDown = createKeydownEvent('ArrowDown', DOWN_ARROW);
+
+        // Move focus past disabled item for testing ease
+        element.dispatchEvent(eventDown);
+        element.dispatchEvent(eventDown);
+        element.dispatchEvent(eventDown);
+        fixture.detectChanges();
+
+        const event = createKeydownEvent('ArrowDown', DOWN_ARROW);
+        Object.defineProperty(event, 'shiftKey', {get: () => true});
+
+        element.dispatchEvent(event);
+        fixture.detectChanges();
+
+        expect(instance.value).toEqual(['Florida']);
 
+        const event2 = createKeyboardEvent('keydown', UP_ARROW);
+        Object.defineProperty(event2, 'shiftKey', {get: () => true});
+        element.dispatchEvent(event2);
+
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+          expect(instance.value).toEqual(['Florida', 'California']);
+        });
+      });
     });
 
 

diff --git a/terminus-ui/select/src/select.component.ts b/terminus-ui/select/src/select.component.ts
@@ -1322,13 +1322,17 @@ export class TsSelectComponent implements
         }
       });
     } else {
-      const previouslyFocusedIndex = manager.activeItemIndex;
-
-      manager.onKeydown(event);
-
-      const notPreviouslyFocused = manager.activeItem && manager.activeItemIndex !== previouslyFocusedIndex;
-      const shouldSelect = this.allowMultiple && isArrowKey && event.shiftKey && notPreviouslyFocused;
+      const shouldSelect = this.allowMultiple && isArrowKey && event.shiftKey;
 
+      if (isArrowKey && event.shiftKey) {
+        if (keyCode === DOWN_ARROW) {
+          manager.setNextItemActive();
+        } else {
+          manager.setPreviousItemActive();
+        }
+      } else {
+        manager.onKeydown(event);
+      }
       if (shouldSelect && manager.activeItem) {
         manager.activeItem.selectViaInteraction();
       }