diff --git a/src/app/components/components/chips/chips.component.html b/src/app/components/components/chips/chips.component.html
index 08bcb88163..a9b047f1df 100644
--- a/src/app/components/components/chips/chips.component.html
+++ b/src/app/components/components/chips/chips.component.html
@@ -200,10 +200,10 @@
Type and see how it will load items async:
@@ -216,10 +216,10 @@
@@ -253,6 +253,7 @@
this.filteredAsync = undefined;
if (value) {
this.filteringAsync = true;
+ // Timeout isn't actually needed here, only added for demo to simulate async behavior
setTimeout(() => {
this.filteredAsync = this.strings.filter((item: any) => {
return item.toLowerCase().indexOf(value.toLowerCase()) > -1;
diff --git a/src/app/components/components/chips/chips.component.ts b/src/app/components/components/chips/chips.component.ts
index 4dc3a25f10..fe9da73ea2 100644
--- a/src/app/components/components/chips/chips.component.ts
+++ b/src/app/components/components/chips/chips.component.ts
@@ -90,6 +90,7 @@ export class ChipsDemoComponent implements OnInit {
this.filteredAsync = undefined;
if (value) {
this.filteringAsync = true;
+ // Timeout isn't actually needed here, only added for demo to simulate async behavior
setTimeout(() => {
this.filteredAsync = this.strings.filter((item: any) => {
return item.toLowerCase().indexOf(value.toLowerCase()) > -1;
diff --git a/src/platform/core/chips/README.md b/src/platform/core/chips/README.md
index 1820bde75b..4a53ecf9b2 100644
--- a/src/platform/core/chips/README.md
+++ b/src/platform/core/chips/README.md
@@ -16,7 +16,7 @@ Properties:
| `stacked?` | `boolean` | Set stacked or horizontal chips depending on value. Defaults to false.
| `placeholder?` | `string` | Placeholder for the autocomplete input.
| `chipAddition` | `boolean` | Disables the ability to add chips. When setting readOnly as true, this will be overriden. Defaults to true.
-| `chipRemoval` | `boolean` | Disables the ability to remove chips. If it doesn't exist chipRemoval defaults to true. readyOnly must be false for this option to work.
+| `chipRemoval` | `boolean` | Disables the ability to remove chips. When setting readOnly as true, this will be overriden. Defaults to true.
| `debounce` | `string` | Debounce timeout between keypresses. Defaults to 200.
| `add?` | `function` | Method to be executed when a chip is added. Sends chip value as event.
| `remove?` | `function` | Method to be executed when a chip is removed. Sends chip value as event.
diff --git a/src/platform/core/chips/chips.component.html b/src/platform/core/chips/chips.component.html
index 2a6b3ac7d9..901f2af191 100644
--- a/src/platform/core/chips/chips.component.html
+++ b/src/platform/core/chips/chips.component.html
@@ -1,6 +1,7 @@
-
@@ -13,7 +14,7 @@
[ngOutletContext]="{ chip: chip }">
-
+
cancel
diff --git a/src/platform/core/chips/chips.component.scss b/src/platform/core/chips/chips.component.scss
index 6e1234b7a1..1731442220 100644
--- a/src/platform/core/chips/chips.component.scss
+++ b/src/platform/core/chips/chips.component.scss
@@ -33,7 +33,7 @@
box-sizing: border-box;
max-width: 100%;
position: relative;
- &.td-chip-disabled {
+ &.td-chip-after-pad {
@include rtl(padding, 0 12px 0 0, 0 0 0 12px);
}
md-icon.td-chip-removal {
diff --git a/src/platform/core/chips/chips.component.ts b/src/platform/core/chips/chips.component.ts
index 272a434788..f4ee383fb0 100644
--- a/src/platform/core/chips/chips.component.ts
+++ b/src/platform/core/chips/chips.component.ts
@@ -180,6 +180,14 @@ export class TdChipsComponent implements ControlValueAccessor, DoCheck, OnInit,
return this._chipRemoval;
}
+ /**
+ * Checks if not in readOnly state and if chipRemoval is set to 'true'
+ * States if a chip can be removed
+ */
+ get canRemoveChip(): boolean {
+ return this.chipRemoval && !this.readOnly;
+ }
+
/**
* placeholder?: string
* Placeholder for the autocomplete input.
@@ -391,11 +399,11 @@ export class TdChipsComponent implements ControlValueAccessor, DoCheck, OnInit,
*/
addChip(value: any): boolean {
/**
- * add a 200 ms delay when reopening the autocomplete to give it time
+ * add a debounce ms delay when reopening the autocomplete to give it time
* to rerender the next list and at the correct spot
*/
this._closeAutocomplete();
- Observable.timer(200).toPromise().then(() => {
+ Observable.timer(this.debounce).toPromise().then(() => {
this.setFocusedState();
this._setFirstOptionActive();
this._openAutocomplete();
@@ -532,15 +540,9 @@ export class TdChipsComponent implements ControlValueAccessor, DoCheck, OnInit,
switch (event.keyCode) {
case DELETE:
case BACKSPACE:
- /** Check to see if not in [readOnly] state to delete a chip */
- if (!this.readOnly) {
- /**
- * Checks [chipRemoval] state to delete a chips
- * To enable [chipRemoval] the [readOnly] state must be true.
- */
- if (this.chipRemoval) {
- this.removeChip(index);
- }
+ /** Check to see if we can delete a chip */
+ if (this.canRemoveChip) {
+ this.removeChip(index);
}
break;
case UP_ARROW: