diff --git a/src/demo-app/chips/chips-demo.html b/src/demo-app/chips/chips-demo.html
index 7b7bd87d9706..d068c4b50e61 100644
--- a/src/demo-app/chips/chips-demo.html
+++ b/src/demo-app/chips/chips-demo.html
@@ -51,7 +51,7 @@
Input Container
{{person.name}}
- cancel
+ cancel
Input Container
{{person.name}}
- cancel
+ cancel
diff --git a/src/lib/chips/_chips-theme.scss b/src/lib/chips/_chips-theme.scss
index 7a8e4c6d913b..4e4f1e959a1b 100644
--- a/src/lib/chips/_chips-theme.scss
+++ b/src/lib/chips/_chips-theme.scss
@@ -45,19 +45,8 @@ $mat-chip-line-height: 16px;
$selected-background: if($is-dark-theme, mat-color($background, app-bar), #808080);
$selected-foreground: if($is-dark-theme, mat-color($foreground, text), $light-selected-foreground);
- $focus-color: mat-color($foreground, secondary-text);
-
.mat-chip {
@include mat-chips-color($unselected-foreground, $unselected-background);
-
- .mat-chip-focus-border {
- pointer-events: none;
- }
-
- &:focus {
- outline: none;
- border: 2px solid $focus-color;
- }
}
.mat-chip.mat-chip-selected {
diff --git a/src/lib/chips/chip-input.spec.ts b/src/lib/chips/chip-input.spec.ts
index fea71eb40a86..513d7eaf5e5a 100644
--- a/src/lib/chips/chip-input.spec.ts
+++ b/src/lib/chips/chip-input.spec.ts
@@ -4,9 +4,11 @@ import {Component, DebugElement} from '@angular/core';
import {MdChipInput, MdChipInputEvent} from './chip-input';
import {By} from '@angular/platform-browser';
import {Directionality} from '../core';
-import {createKeyboardEvent} from '../core/testing/event-objects';
+import {createKeyboardEvent} from '@angular/cdk/testing';
-import {ENTER, COMMA} from '../core/keyboard/keycodes';
+import {ENTER} from '../core/keyboard/keycodes';
+
+const COMMA = 188;
describe('MdChipInput', () => {
let fixture: ComponentFixture;
diff --git a/src/lib/chips/chip-list.spec.ts b/src/lib/chips/chip-list.spec.ts
index 8a607017d997..f3b91356d9c9 100644
--- a/src/lib/chips/chip-list.spec.ts
+++ b/src/lib/chips/chip-list.spec.ts
@@ -2,13 +2,12 @@ import {async, ComponentFixture, TestBed, fakeAsync, tick} from '@angular/core/t
import {Component, DebugElement, QueryList} from '@angular/core';
import {By} from '@angular/platform-browser';
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
-import {MdChip, MdChipList, MdChipsModule} from './index';
+import {MdChipList, MdChipsModule} from './index';
import {FocusKeyManager} from '../core/a11y/focus-key-manager';
-import {SPACE, LEFT_ARROW, RIGHT_ARROW, TAB} from '../core/keyboard/keycodes';
import {createKeyboardEvent} from '@angular/cdk/testing';
import {MdInputModule} from '../input/index';
-import {LEFT_ARROW, RIGHT_ARROW, BACKSPACE, DELETE, SPACE, TAB} from '../core/keyboard/keycodes';
+import {LEFT_ARROW, RIGHT_ARROW, BACKSPACE, DELETE, TAB} from '../core/keyboard/keycodes';
import {Directionality} from '../core';
describe('MdChipList', () => {
@@ -17,7 +16,7 @@ describe('MdChipList', () => {
let chipListNativeElement: HTMLElement;
let chipListInstance: MdChipList;
let testComponent: StandardChipList;
- let chips: QueryList;
+ let chips: QueryList;
let manager: FocusKeyManager;
let dir = 'ltr';
diff --git a/src/lib/chips/chip-list.ts b/src/lib/chips/chip-list.ts
index 6acaf32bbcdb..feb65ebcf7a0 100644
--- a/src/lib/chips/chip-list.ts
+++ b/src/lib/chips/chip-list.ts
@@ -22,21 +22,10 @@ import {
import {MdChip} from './chip';
import {FocusKeyManager} from '../core/a11y/focus-key-manager';
-import {BACKSPACE, DELETE, SPACE, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW, UP_ARROW} from '../core/keyboard/keycodes';
+import {BACKSPACE, DELETE, LEFT_ARROW, RIGHT_ARROW, UP_ARROW} from '../core/keyboard/keycodes';
import {coerceBooleanProperty, Directionality} from '@angular/cdk';
import {Subscription} from 'rxjs/Subscription';
-/** Utility to check if an input element has no value. */
-function _isInputEmpty(element: HTMLElement): boolean {
- if (element && element.nodeName.toLowerCase() == 'input') {
- let input = element as HTMLInputElement;
-
- return !input.value;
- }
-
- return false;
-}
-
/**
* A material design chips component (named ChipList for it's similarity to the List component).
*
@@ -116,7 +105,7 @@ export class MdChipList implements AfterContentInit, OnDestroy {
this._subscribeChips(chips);
// If we have 0 chips, attempt to focus an input (if available)
- if (chips.length == 0) {
+ if (chips.length === 0) {
this._focusInput();
}
@@ -139,7 +128,10 @@ export class MdChipList implements AfterContentInit, OnDestroy {
* it's selected state is always ignored.
*/
@Input()
- get selectable(): boolean { return this._selectable; }
+ get selectable(): boolean {
+ return this._selectable;
+ }
+
set selectable(value: boolean) {
this._selectable = coerceBooleanProperty(value);
}
@@ -175,13 +167,12 @@ export class MdChipList implements AfterContentInit, OnDestroy {
_keydown(event: KeyboardEvent) {
let code = event.keyCode;
let target = event.target as HTMLElement;
- let isInputEmpty = _isInputEmpty(target);
+ let isInputEmpty = this._isInputEmpty(target);
let isRtl = this._dir && this._dir.value == 'rtl';
- let isPrevKey = (code == (isRtl ? RIGHT_ARROW : LEFT_ARROW));
- let isNextKey = (code == (isRtl ? LEFT_ARROW : RIGHT_ARROW));
- let isBackKey = (code == BACKSPACE || code == DELETE || code == UP_ARROW || isPrevKey);
- let isForwardKey = (code == DOWN_ARROW || isNextKey);
+ let isPrevKey = (code === (isRtl ? RIGHT_ARROW : LEFT_ARROW));
+ let isNextKey = (code === (isRtl ? LEFT_ARROW : RIGHT_ARROW));
+ let isBackKey = (code === BACKSPACE || code == DELETE || code == UP_ARROW || isPrevKey);
// If they are on an empty input and hit backspace/delete/left arrow, focus the last chip
if (isInputEmpty && isBackKey) {
this._keyManager.setLastItemActive();
@@ -189,12 +180,6 @@ export class MdChipList implements AfterContentInit, OnDestroy {
return;
}
- let focusedIndex = this._keyManager.activeItemIndex;
-
- if (typeof focusedIndex === 'number' && this._isValidIndex(focusedIndex)) {
- let focusedChip: MdChip = this.chips.toArray()[focusedIndex];
- }
-
// If they are on a chip, check for space/left/right, otherwise pass to our key manager (like
// up/down keys)
if (target && target.classList.contains('mat-chip')) {
@@ -225,7 +210,7 @@ export class MdChipList implements AfterContentInit, OnDestroy {
*/
protected _updateTabIndex(): void {
// If we have 0 chips, we should not allow keyboard focus
- this._tabIndex = (this.chips.length == 0 ? -1 : 0);
+ this._tabIndex = (this.chips.length === 0 ? -1 : 0);
}
/**
@@ -263,7 +248,7 @@ export class MdChipList implements AfterContentInit, OnDestroy {
this._keyManager.setActiveItem(chipIndex - 1);
}
}
- if (this._keyManager.activeItemIndex == chipIndex) {
+ if (this._keyManager.activeItemIndex === chipIndex) {
this._lastDestroyedIndex = chipIndex;
}
@@ -308,4 +293,14 @@ export class MdChipList implements AfterContentInit, OnDestroy {
private _isValidIndex(index: number): boolean {
return index >= 0 && index < this.chips.length;
}
+
+ private _isInputEmpty(element: HTMLElement): boolean {
+ if (element && element.nodeName.toLowerCase() === 'input') {
+ let input = element as HTMLInputElement;
+
+ return !input.value;
+ }
+
+ return false;
+ }
}
diff --git a/src/lib/chips/chip-remove.spec.ts b/src/lib/chips/chip-remove.spec.ts
index c99bc51dbc3b..39450a639438 100644
--- a/src/lib/chips/chip-remove.spec.ts
+++ b/src/lib/chips/chip-remove.spec.ts
@@ -48,20 +48,6 @@ describe('Chip Remove', () => {
expect(testChip.didRemove).toHaveBeenCalled();
});
-
- it(`should monitors the parent chip's [removable] property`, () => {
- let hrefElement = chipNativeElement.querySelector('a')!;
-
- testChip.removable = true;
- fixture.detectChanges();
-
- expect(hrefElement.classList).not.toContain('mat-chip-remove-hidden');
-
- testChip.removable = false;
- fixture.detectChanges();
-
- expect(hrefElement.classList).toContain('mat-chip-remove-hidden');
- });
});
});
diff --git a/src/lib/chips/chip.spec.ts b/src/lib/chips/chip.spec.ts
index d210a7136474..cbf45dc3df7c 100644
--- a/src/lib/chips/chip.spec.ts
+++ b/src/lib/chips/chip.spec.ts
@@ -1,9 +1,9 @@
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import {Component, DebugElement} from '@angular/core';
import {By} from '@angular/platform-browser';
+import {createKeyboardEvent} from '@angular/cdk/testing';
import {MdChipList, MdChip, MdChipEvent, MdChipsModule} from './index';
import {SPACE, DELETE, BACKSPACE} from '../core/keyboard/keycodes';
-import {createKeyboardEvent} from '../core/testing/event-objects';
import {Directionality} from '../core';
describe('Chips', () => {
diff --git a/src/lib/chips/chips.scss b/src/lib/chips/chips.scss
index cd4823b0eeac..314e0223fd2c 100644
--- a/src/lib/chips/chips.scss
+++ b/src/lib/chips/chips.scss
@@ -2,6 +2,7 @@
$mat-chip-vertical-padding: 8px;
$mat-chip-horizontal-padding: 12px;
+$mat-chip-remove-margin: -4px;
$mat-chips-chip-margin: $mat-chip-horizontal-padding / 4;
@@ -63,3 +64,7 @@ $mat-chips-chip-margin: $mat-chip-horizontal-padding / 4;
.mat-input-prefix .mat-chip-list-wrapper {
margin-bottom: $mat-chip-vertical-padding;
}
+
+.mat-chip-remove {
+ margin: 0 $mat-chip-remove-margin 0 0;
+}