@gitlab/ui 32.34.0 → 32.34.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [32.34.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.34.0...v32.34.1) (2021-11-08)
+
+
+### Bug Fixes
+
+* **FilteredSearch:** Remove case sensitivity ([6e3c271](https://gitlab.com/gitlab-org/gitlab-ui/commit/6e3c271cefb3f44893fb6b684c59ec73e3b6f7e5))
+
 # [32.34.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.33.0...v32.34.0) (2021-11-05)
 
 

package/dist/components/base/filtered_search/filtered_search_suggestion_list.js

@@ -36,15 +36,20 @@ var script = {
   },
   watch: {
     initialValue(newValue) {
-      this.activeIdx = this.registeredItems.findIndex(item => item.value === newValue);
+      this.activeIdx = this.registeredItems.findIndex(item => this.valuesMatch(item.value, newValue));
     }
 
   },
   methods: {
+    valuesMatch(firstValue, secondValue) {
+      if (!firstValue || !secondValue) return false;
+      return typeof firstValue === 'string' ? firstValue.toLowerCase() === secondValue.toLowerCase() : firstValue === secondValue;
+    },
+
     register(item) {
       this.registeredItems.push(item);
 
-      if (item.value === this.initialValue) {
+      if (this.valuesMatch(item.value, this.initialValue)) {
         this.activeIdx = this.registeredItems.length - 1;
       }
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "32.34.0",
+  "version": "32.34.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/filtered_search/filtered_search_suggestion_list.spec.js

@@ -82,8 +82,8 @@ describe('Filtered search suggestion list component', () => {
       },
       template: `
         <div>
-          <gl-filtered-search-suggestion value="1">1</gl-filtered-search-suggestion>
-          <gl-filtered-search-suggestion value="2">2</gl-filtered-search-suggestion>
+          <gl-filtered-search-suggestion value="One">One</gl-filtered-search-suggestion>
+          <gl-filtered-search-suggestion value="Two">Two</gl-filtered-search-suggestion>
         </div>
       `,
     };
@@ -112,7 +112,7 @@ describe('Filtered search suggestion list component', () => {
     it('selects first suggestion', () => {
       wrapper.vm.nextItem();
       return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.vm.getValue()).toBe('1');
+        expect(wrapper.vm.getValue()).toBe('One');
       });
     });
 
@@ -120,7 +120,7 @@ describe('Filtered search suggestion list component', () => {
       wrapper.vm.nextItem();
       wrapper.vm.nextItem();
       return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.vm.getValue()).toBe('2');
+        expect(wrapper.vm.getValue()).toBe('Two');
       });
     });
 
@@ -146,7 +146,7 @@ describe('Filtered search suggestion list component', () => {
       wrapper.vm.prevItem();
       wrapper.vm.prevItem();
       return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.vm.getValue()).toBe('2');
+        expect(wrapper.vm.getValue()).toBe('Two');
       });
     });
 
@@ -156,14 +156,21 @@ describe('Filtered search suggestion list component', () => {
       wrapper.vm.nextItem();
       wrapper.vm.nextItem();
       return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.vm.getValue()).toBe('1');
+        expect(wrapper.vm.getValue()).toBe('One');
       });
     });
 
     it('highlights suggestion if initial-value is provided', () => {
-      wrapper.setProps({ initialValue: '2' });
+      wrapper.setProps({ initialValue: 'Two' });
       return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.find('.gl-filtered-search-suggestion-active').text()).toBe('2');
+        expect(wrapper.find('.gl-filtered-search-suggestion-active').text()).toBe('Two');
+      });
+    });
+
+    it('highlights suggestion if initial-value is provided, regardless of case sensitivity', async () => {
+      wrapper.setProps({ initialValue: 'two' });
+      return wrapper.vm.$nextTick().then(() => {
+        expect(wrapper.find('.gl-filtered-search-suggestion-active').text()).toBe('Two');
       });
     });
 

package/src/components/base/filtered_search/filtered_search_suggestion_list.vue

@@ -33,14 +33,23 @@ export default {
 
   watch: {
     initialValue(newValue) {
-      this.activeIdx = this.registeredItems.findIndex((item) => item.value === newValue);
+      this.activeIdx = this.registeredItems.findIndex((item) =>
+        this.valuesMatch(item.value, newValue)
+      );
     },
   },
 
   methods: {
+    valuesMatch(firstValue, secondValue) {
+      if (!firstValue || !secondValue) return false;
+
+      return typeof firstValue === 'string'
+        ? firstValue.toLowerCase() === secondValue.toLowerCase()
+        : firstValue === secondValue;
+    },
     register(item) {
       this.registeredItems.push(item);
-      if (item.value === this.initialValue) {
+      if (this.valuesMatch(item.value, this.initialValue)) {
         this.activeIdx = this.registeredItems.length - 1;
       }
     },