From 4296591a19f1dc10061c8169c59df5322ebc065a Mon Sep 17 00:00:00 2001
From: Joakim Carlsson Kekonius <joakim.carlsson.kekonius@neovici.se>
Date: Tue, 12 Nov 2019 12:50:53 +0100
Subject: [PATCH] feat: changes no value chips to italic (#58)

* feat: changes no value chips to italic

* refs #50
---
 paper-autocomplete-chips.js | 47 ++++++++++++++++++++++++-------------
 test/basic.html             | 36 ++++++++++++++++++++++++++++
 2 files changed, 67 insertions(+), 16 deletions(-)

diff --git a/paper-autocomplete-chips.js b/paper-autocomplete-chips.js
index 4710971..05deea7 100644
--- a/paper-autocomplete-chips.js
+++ b/paper-autocomplete-chips.js
@@ -229,6 +229,29 @@ class PaperAutocompleteChips extends translatable(PolymerElement) {
 								value: objText
 							};
 						},
+						sortResult = results => {
+							return results.sort((a, b) => {
+								if (a.text === this.noValueLabel) {
+									return -1;
+								}
+								if (b.text === this.noValueLabel) {
+									return 1;
+								}
+								if (a.idx < b.idx) {
+									return -1;
+								}
+								if (a.idx > b.idx) {
+									return 1;
+								}
+								if (a.text < b.text) {
+									return -1;
+								}
+								if (a.text > b.text) {
+									return 1;
+								}
+								return 0;
+							});
+						},
 						hasOtherObjectValue = value => {
 							const prop = this.get(this.valueProperty, value);
 							if (prop == null) {
@@ -239,6 +262,7 @@ class PaperAutocompleteChips extends translatable(PolymerElement) {
 							);
 						};
 
+
 					return (datasource, query) => { // eslint-disable-line max-statements
 						const results = [];
 
@@ -259,34 +283,25 @@ class PaperAutocompleteChips extends translatable(PolymerElement) {
 							if (this.valueProperty && hasOtherObjectValue(result.value)) {
 								continue;
 							}
+
 							result.idx = result.text.toLowerCase().indexOf(query);
 							if (result.idx === -1) {
 								continue;
 							}
 
 							const escapedQuery = query.replace(/[|\\{}()[\]^$+*?.-]/gu, '\\$&');
-							result.html = result.text.replace(new RegExp('(' + escapedQuery + ')', 'igu'), regexpResult);
+							if (result.text === this.noValueLabel) {
+								result.html = '<i>' + result.text.replace(new RegExp('(' + escapedQuery + ')', 'igu'), regexpResult) + '</i>';
+							} else {
+								result.html = result.text.replace(new RegExp('(' + escapedQuery + ')', 'igu'), regexpResult);
+							}
 							results.push(result);
 
 							if (results.length >= maxResults) {
 								break;
 							}
 						}
-						return results.sort((a, b) => {
-							if (a.idx < b.idx) {
-								return -1;
-							}
-							if (a.idx > b.idx) {
-								return 1;
-							}
-							if (a.text < b.text) {
-								return -1;
-							}
-							if (a.text > b.text) {
-								return 1;
-							}
-							return 0;
-						});
+						return sortResult(results);
 					};
 				}
 			},
diff --git a/test/basic.html b/test/basic.html
index a7370fe..3e8162f 100644
--- a/test/basic.html
+++ b/test/basic.html
@@ -74,6 +74,18 @@
 					done();
 				});
 
+				test('Selecting null source', done => {
+					chips.source = ['A', '', 'C'];
+
+					select('');
+					assert.deepEqual(chips.selectedItems, ['']);
+
+					select('C');
+					assert.deepEqual(chips.selectedItems, ['', 'C']);
+
+					done();
+				});
+
 				test('Selecting object source', done => {
 					chips.source = [
 						{value: 1, label: 'One'},
@@ -112,6 +124,30 @@
 					done();
 				});
 
+				test('Search sorts suggestions and has correctly formatted no value chip', done => {
+					chips.textProperty = 'label';
+					autocomplete.text = 'e';
+
+					window.setTimeout(() => {
+						assert.equal(suggestions._suggestions.length, 5);
+						assert.equal(suggestions._suggestions[0].value.value, '');
+						assert.equal(suggestions._suggestions[4].value.label, 'zzzace');
+						assert.equal(suggestions._suggestions[0].html, '<i>No valu<b>e</b></i>');
+						done();
+					}, 200);
+
+					suggestions._input.dispatchEvent(new CustomEvent('focus', { bubbles: true, composed: true }));
+
+					chips.source = [
+						{value: 'z', label: 'zab'},
+						{value: 'x', label: 'zzzace'},
+						{value: '', label: 'No value'},
+						{value: 'd', label: 'eaaaf'},
+						{value: 'e', label: 'bbbegh'},
+						{value: 'k', label: 'ceccji'}
+					];
+				});
+
 				test('Source changed updates suggestions list', done => {
 					chips.textProperty = 'label';
 					autocomplete.text = 'a';