FIX: makes select-kit match searches with accents (filter and content)

app/assets/javascripts/select-kit/components/category-chooser.js.es6

@@ -31,9 +31,8 @@ export default ComboBoxComponent.extend({
     }
 
     const _matchFunction = (f, text) => {
-      return text.toLowerCase().indexOf(f) > -1;
+      return this._normalize(text).indexOf(f) > -1;
     };
-    const lowerFilter = filter.toLowerCase();
 
     return computedContent.filter(c => {
       const category = Category.findById(get(c, "value"));
@@ -41,11 +40,10 @@ export default ComboBoxComponent.extend({
       if (category && category.get("parentCategory")) {
         const categoryName = category.get("parentCategory.name");
         return (
-          _matchFunction(lowerFilter, text) ||
-          _matchFunction(lowerFilter, categoryName)
+          _matchFunction(filter, text) || _matchFunction(filter, categoryName)
         );
       } else {
-        return _matchFunction(lowerFilter, text);
+        return _matchFunction(filter, text);
       }
     });
   },

app/assets/javascripts/select-kit/components/category-selector.js.es6

@@ -36,9 +36,9 @@ export default MultiSelectComponent.extend({
   },
 
   filterComputedContent(computedContent, computedValues, filter) {
-    const regex = new RegExp(filter.toLowerCase(), "i");
+    const regex = new RegExp(filter, "i");
     return computedContent.filter(category =>
-      Ember.get(category, "name").match(regex)
+      this._normalize(Ember.get(category, "name")).match(regex)
     );
   },
 

app/assets/javascripts/select-kit/components/multi-select.js.es6

@@ -114,13 +114,8 @@ export default SelectKitComponent.extend({
   mutateContent() {},
 
   filterComputedContent(computedContent, computedValues, filter) {
-    const lowerFilter = filter.toLowerCase();
     return computedContent.filter(c => {
-      return (
-        get(c, "name")
-          .toLowerCase()
-          .indexOf(lowerFilter) > -1
-      );
+      return this._normalize(get(c, "name")).indexOf(filter) > -1;
     });
   },
 
@@ -147,7 +142,7 @@ export default SelectKitComponent.extend({
       computedContent = this.filterComputedContent(
         computedContent,
         computedValues,
-        filter
+        this._normalize(filter)
       );
     }
 

app/assets/javascripts/select-kit/components/single-select.js.es6

@@ -86,13 +86,8 @@ export default SelectKitComponent.extend({
   },
 
   filterComputedContent(computedContent, computedValue, filter) {
-    const lowerFilter = filter.toLowerCase();
     return computedContent.filter(c => {
-      return (
-        get(c, "name")
-          .toLowerCase()
-          .indexOf(lowerFilter) > -1
-      );
+      return this._normalize(get(c, "name")).indexOf(filter) > -1;
     });
   },
 
@@ -136,7 +131,7 @@ export default SelectKitComponent.extend({
       computedContent = this.filterComputedContent(
         computedContent,
         computedValue,
-        filter
+        this._normalize(filter)
       );
     }
 

app/assets/javascripts/select-kit/mixins/utils.js.es6

@@ -27,6 +27,16 @@ export default Ember.Mixin.create({
     return !isNaN(parseFloat(input)) && isFinite(input);
   },
 
+  _normalize(input) {
+    input = input.toLowerCase();
+
+    if (typeof input.normalize === "function") {
+      input = input.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
+    }
+
+    return input;
+  },
+
   _cast(value) {
     if (value === this.noneValue) return value;
     return this._castInteger(this._castBoolean(value));

test/javascripts/components/single-select-test.js.es6

@@ -779,3 +779,49 @@ componentTest("with minimumLabel", {
     });
   }
 });
+
+componentTest("with accents in filter", {
+  template: "{{single-select content=content filterable=true}}",
+
+  beforeEach() {
+    this.set("content", ["sam", "jeff", "neil"]);
+  },
+
+  test(assert) {
+    this.get("subject").expand();
+    this.get("subject").fillInFilter("jéff");
+
+    andThen(() => {
+      assert.equal(this.get("subject").rows().length, 1);
+      assert.equal(
+        this.get("subject")
+          .rowByIndex(0)
+          .name(),
+        "jeff"
+      );
+    });
+  }
+});
+
+componentTest("with accents in content", {
+  template: "{{single-select content=content filterable=true}}",
+
+  beforeEach() {
+    this.set("content", ["sam", "jéff", "neil"]);
+  },
+
+  test(assert) {
+    this.get("subject").expand();
+    this.get("subject").fillInFilter("jeff");
+
+    andThen(() => {
+      assert.equal(this.get("subject").rows().length, 1);
+      assert.equal(
+        this.get("subject")
+          .rowByIndex(0)
+          .name(),
+        "jéff"
+      );
+    });
+  }
+});