@king-design/vue 3.6.0 → 3.6.2-beta.0

package/components/select/index.spec.js

@@ -17,19 +17,28 @@ import { Select, Option } from '../select';
 import SearchableDemo from '~/components/select/demos/searchable';
 import ImmutableDemo from '~/components/select/demos/immutable';
 describe('Select', function () {
-  afterEach(function (done) {
-    unmount();
-    setTimeout(done, 500);
-  });
-  it('should select value correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-    var _mount, instance, element, trigger, dropdown, item, _dropdown;
+  afterEach( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
+        case 0:
+          unmount();
+          _context.next = 3;
+          return wait(500);
+        case 3:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+  it('should select value correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var _mount, instance, element, trigger, dropdown, item, _dropdown;
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
         case 0:
           _mount = mount(BasicDemo), instance = _mount[0], element = _mount[1];
           trigger = element.querySelector('.k-select');
           trigger.click();
-          _context.next = 5;
+          _context2.next = 5;
           return wait();
         case 5:
           expect(element.outerHTML).to.matchSnapshot();
@@ -37,65 +46,65 @@ describe('Select', function () {
           expect(dropdown.innerHTML).to.matchSnapshot();
           item = dropdown.querySelector('.k-dropdown-item');
           item.click();
-          _context.next = 12;
+          _context2.next = 12;
           return wait();
         case 12:
           expect(element.outerHTML).to.matchSnapshot();
           trigger.click();
-          _context.next = 16;
+          _context2.next = 16;
           return wait();
         case 16:
           _dropdown = getElement('.k-select-menu');
           expect(_dropdown.innerHTML).to.matchSnapshot();
         case 18:
         case "end":
-          return _context.stop();
+          return _context2.stop();
       }
-    }, _callee);
+    }, _callee2);
   })));
-  it('disabled', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+  it('disabled', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
     var _mount2, instance, element, _element$querySelecto, trigger, dropdown, close;
-    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-      while (1) switch (_context2.prev = _context2.next) {
+    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
         case 0:
           _mount2 = mount(DisabledDemo), instance = _mount2[0], element = _mount2[1];
           _element$querySelecto = element.querySelectorAll('.k-select'), trigger = _element$querySelecto[1];
           trigger.click();
-          _context2.next = 5;
+          _context3.next = 5;
           return wait();
         case 5:
           dropdown = getElement('.k-select-menu');
           expect(dropdown.innerHTML).to.matchSnapshot();
           close = element.querySelector('.k-tag-close');
           close.click();
-          _context2.next = 11;
+          _context3.next = 11;
           return wait();
         case 11:
           expect(instance.get('days').length).to.eql(2);
         case 12:
         case "end":
-          return _context2.stop();
+          return _context3.stop();
       }
-    }, _callee2);
+    }, _callee3);
   })));
-  it('clearable', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+  it('clearable', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
     var _mount3, instance, element, _element$querySelecto2, clear1, clear2, Demo, _mount4, element1, clear;
-    return _regeneratorRuntime.wrap(function _callee3$(_context4) {
-      while (1) switch (_context4.prev = _context4.next) {
+    return _regeneratorRuntime.wrap(function _callee4$(_context5) {
+      while (1) switch (_context5.prev = _context5.next) {
         case 0:
           _mount3 = mount(ClearableDemo), instance = _mount3[0], element = _mount3[1];
           instance.set({
             day: 'Monday',
             days: ['Monday', 'TuesdayT']
           });
-          _context4.next = 4;
+          _context5.next = 4;
           return wait();
         case 4:
           expect(element.outerHTML).to.matchSnapshot();
           _element$querySelecto2 = element.querySelectorAll('.k-select-clear'), clear1 = _element$querySelecto2[0], clear2 = _element$querySelecto2[1];
           clear1.click();
           clear2.click();
-          _context4.next = 10;
+          _context5.next = 10;
           return wait();
         case 10:
           expect(instance.get('day')).to.eql(null);
@@ -105,12 +114,12 @@ describe('Select', function () {
           Demo = /*#__PURE__*/function (_Component) {
             _inheritsLoose(Demo, _Component);
             function Demo() {
-              var _context3;
+              var _context4;
               var _this;
               for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
                 args[_key] = arguments[_key];
               }
-              _this = _Component.call.apply(_Component, _concatInstanceProperty(_context3 = [this]).call(_context3, args)) || this;
+              _this = _Component.call.apply(_Component, _concatInstanceProperty(_context4 = [this]).call(_context4, args)) || this;
               _this.Select = Select;
               _this.Option = Option;
               return _this;
@@ -128,26 +137,26 @@ describe('Select', function () {
           expect(clear).to.be.null;
         case 18:
         case "end":
-          return _context4.stop();
+          return _context5.stop();
       }
-    }, _callee3);
+    }, _callee4);
   })));
-  it('multiple', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+  it('multiple', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
     var _mount5, instance, element, _element$querySelecto3, trigger, dropdown, _dropdown$querySelect, item1, item2, deleteBtn;
-    return _regeneratorRuntime.wrap(function _callee4$(_context5) {
-      while (1) switch (_context5.prev = _context5.next) {
+    return _regeneratorRuntime.wrap(function _callee5$(_context6) {
+      while (1) switch (_context6.prev = _context6.next) {
         case 0:
           _mount5 = mount(ClearableDemo), instance = _mount5[0], element = _mount5[1];
           _element$querySelecto3 = element.querySelectorAll('.k-select'), trigger = _element$querySelecto3[1];
           trigger.click();
-          _context5.next = 5;
+          _context6.next = 5;
           return wait();
         case 5:
           dropdown = getElement('.k-select-menu');
           _dropdown$querySelect = dropdown.querySelectorAll('.k-dropdown-item'), item1 = _dropdown$querySelect[0], item2 = _dropdown$querySelect[1];
           item1.click();
           item2.click();
-          _context5.next = 11;
+          _context6.next = 11;
           return wait();
         case 11:
           expect(dropdown.innerHTML).to.matchSnapshot();
@@ -155,31 +164,31 @@ describe('Select', function () {
           // delete
           deleteBtn = element.querySelector('.k-tag-close');
           deleteBtn.click();
-          _context5.next = 17;
+          _context6.next = 17;
           return wait();
         case 17:
           expect(instance.get('days')).to.eql(['Tuesday']);
           expect(dropdown.innerHTML).to.matchSnapshot();
         case 19:
         case "end":
-          return _context5.stop();
+          return _context6.stop();
       }
-    }, _callee4);
+    }, _callee5);
   })));
-  it('filterable', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+  it('filterable', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
     var _mount6, instance, element, _element$querySelecto4, input1, input2, input3, dropdown1, dropdown2;
-    return _regeneratorRuntime.wrap(function _callee5$(_context6) {
-      while (1) switch (_context6.prev = _context6.next) {
+    return _regeneratorRuntime.wrap(function _callee6$(_context7) {
+      while (1) switch (_context7.prev = _context7.next) {
         case 0:
           _mount6 = mount(FilterDemo), instance = _mount6[0], element = _mount6[1];
           _element$querySelecto4 = element.querySelectorAll('.k-input-inner'), input1 = _element$querySelecto4[0], input2 = _element$querySelecto4[1], input3 = _element$querySelecto4[2];
           input1.click();
-          _context6.next = 5;
+          _context7.next = 5;
           return wait();
         case 5:
           input1.value = 'm';
           dispatchEvent(input1, 'input');
-          _context6.next = 9;
+          _context7.next = 9;
           return wait();
         case 9:
           dropdown1 = getElement('.k-select-menu');
@@ -187,17 +196,17 @@ describe('Select', function () {
           dispatchEvent(document, 'keydown', {
             keyCode: 13
           });
-          _context6.next = 14;
+          _context7.next = 14;
           return wait();
         case 14:
           expect(instance.get('day')).to.eql('Monday');
           input2.click();
-          _context6.next = 18;
+          _context7.next = 18;
           return wait();
         case 18:
           input2.value = '二';
           dispatchEvent(input2, 'input');
-          _context6.next = 22;
+          _context7.next = 22;
           return wait();
         case 22:
           dropdown2 = getElement('.k-select-menu');
@@ -205,70 +214,70 @@ describe('Select', function () {
           dispatchEvent(document, 'keydown', {
             keyCode: 13
           });
-          _context6.next = 27;
+          _context7.next = 27;
           return wait();
         case 27:
           input2.value = 'Wed';
           dispatchEvent(input2, 'input');
-          _context6.next = 31;
+          _context7.next = 31;
           return wait();
         case 31:
           dispatchEvent(document, 'keydown', {
             keyCode: 13
           });
-          _context6.next = 34;
+          _context7.next = 34;
           return wait();
         case 34:
           expect(instance.get('days')).to.eql(['Tuesday', 'Wednesday']);
           input3.click();
-          _context6.next = 38;
+          _context7.next = 38;
           return wait();
         case 38:
           input3.value = 'm';
           dispatchEvent(input3, 'input');
-          _context6.next = 42;
+          _context7.next = 42;
           return wait();
         case 42:
           expect(getElement('.k-select-menu').innerText).to.eql('无数据');
           input3.value = '三';
           dispatchEvent(input3, 'input');
-          _context6.next = 47;
+          _context7.next = 47;
           return wait();
         case 47:
           dispatchEvent(document, 'keydown', {
             keyCode: 13
           });
-          _context6.next = 50;
+          _context7.next = 50;
           return wait();
         case 50:
           expect(instance.get('day1')).to.eql('Wednesday');
           // should input spaces
           input1.click();
-          _context6.next = 54;
+          _context7.next = 54;
           return wait();
         case 54:
           dispatchEvent(input1, 'focus');
           input1.value = 'm ';
           dispatchEvent(input1, 'input');
-          _context6.next = 59;
+          _context7.next = 59;
           return wait();
         case 59:
           expect(input1.value).to.eql('m ');
         case 60:
         case "end":
-          return _context6.stop();
+          return _context7.stop();
       }
-    }, _callee5);
+    }, _callee6);
   })));
-  it('group', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
+  it('group', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
     var _mount7, instance, element, _element$querySelecto5, trigger1, trigger2, dropdown1, item, dropdown2;
-    return _regeneratorRuntime.wrap(function _callee6$(_context7) {
-      while (1) switch (_context7.prev = _context7.next) {
+    return _regeneratorRuntime.wrap(function _callee7$(_context8) {
+      while (1) switch (_context8.prev = _context8.next) {
         case 0:
           _mount7 = mount(GroupDemo), instance = _mount7[0], element = _mount7[1];
           _element$querySelecto5 = element.querySelectorAll('.k-select'), trigger1 = _element$querySelecto5[0], trigger2 = _element$querySelecto5[1];
           trigger1.click();
-          _context7.next = 5;
+          _context8.next = 5;
           return wait();
         case 5:
           dropdown1 = getElement('.k-select-menu');
@@ -277,28 +286,73 @@ describe('Select', function () {
           item.click();
           expect(instance.get('day')).to.eql('Monday');
           trigger2.click();
-          _context7.next = 13;
+          _context8.next = 13;
           return wait();
         case 13:
           dropdown2 = getElement('.k-select-menu');
           expect(dropdown2.innerHTML).to.matchSnapshot();
         case 15:
         case "end":
-          return _context7.stop();
+          return _context8.stop();
       }
-    }, _callee6);
+    }, _callee7);
   })));
-  it('keyboard operations', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
-    var _mount8, instance, element, select, dropdown;
-    return _regeneratorRuntime.wrap(function _callee7$(_context8) {
-      while (1) switch (_context8.prev = _context8.next) {
+  it('should select the first card of group on filtering', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
+    var _mount8, instance, element, _element$querySelecto6, trigger, dropdown, input, firstTab, defaultStatusTest;
+    return _regeneratorRuntime.wrap(function _callee8$(_context9) {
+      while (1) switch (_context9.prev = _context9.next) {
+        case 0:
+          defaultStatusTest = function _defaultStatusTest() {
+            var secondTab = dropdown.querySelector('.k-tab:nth-child(2)');
+            var item = dropdown.querySelector('.k-dropdown-item');
+            expect(secondTab.classList.contains('k-active')).to.eql(true);
+            expect(item.classList.contains('k-active')).to.eql(true);
+          };
+          _mount8 = mount(GroupDemo), instance = _mount8[0], element = _mount8[1];
+          instance.set('day', 'Saturday');
+          _context9.next = 5;
+          return wait();
+        case 5:
+          _element$querySelecto6 = element.querySelectorAll('.k-select'), trigger = _element$querySelecto6[1];
+          trigger.click();
+          _context9.next = 9;
+          return wait();
+        case 9:
+          dropdown = getElement('.k-select-menu');
+          defaultStatusTest();
+          // filter
+          input = trigger.querySelector('.k-input-inner');
+          input.value = 'm';
+          dispatchEvent(input, 'input');
+          _context9.next = 16;
+          return wait();
+        case 16:
+          firstTab = dropdown.querySelector('.k-tab');
+          expect(firstTab.classList.contains('k-active')).to.eql(true);
+          // clear
+          input.value = '';
+          dispatchEvent(input, 'input');
+          _context9.next = 22;
+          return wait();
+        case 22:
+          defaultStatusTest();
+        case 23:
+        case "end":
+          return _context9.stop();
+      }
+    }, _callee8);
+  })));
+  it('keyboard operations', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9() {
+    var _mount9, instance, element, select, dropdown;
+    return _regeneratorRuntime.wrap(function _callee9$(_context10) {
+      while (1) switch (_context10.prev = _context10.next) {
         case 0:
-          _mount8 = mount(BasicDemo), instance = _mount8[0], element = _mount8[1];
+          _mount9 = mount(BasicDemo), instance = _mount9[0], element = _mount9[1];
           select = element.querySelector('.k-select');
           dispatchEvent(select, 'keydown', {
             keyCode: 13
           });
-          _context8.next = 5;
+          _context10.next = 5;
           return wait();
         case 5:
           dropdown = getElement('.k-select-menu');
@@ -306,31 +360,31 @@ describe('Select', function () {
           dispatchEvent(select, 'keydown', {
             keyCode: 9
           });
-          _context8.next = 10;
+          _context10.next = 10;
           return wait(500);
         case 10:
           expect(dropdown.style.display).to.eql('none');
         case 11:
         case "end":
-          return _context8.stop();
+          return _context10.stop();
       }
-    }, _callee7);
+    }, _callee9);
   })));
-  it('creatable', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
-    var _mount9, instance, element, input, dropdown, createOption, newCreateOption, _element$querySelecto6, multipleInput, multipleDropdown, mondayOption;
-    return _regeneratorRuntime.wrap(function _callee8$(_context9) {
-      while (1) switch (_context9.prev = _context9.next) {
+  it('creatable', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10() {
+    var _mount10, instance, element, input, dropdown, createOption, newCreateOption, _element$querySelecto7, multipleInput, multipleDropdown, mondayOption;
+    return _regeneratorRuntime.wrap(function _callee10$(_context11) {
+      while (1) switch (_context11.prev = _context11.next) {
         case 0:
-          _mount9 = mount(CreatableDemo), instance = _mount9[0], element = _mount9[1];
+          _mount10 = mount(CreatableDemo), instance = _mount10[0], element = _mount10[1];
           input = element.querySelector('.k-input-inner');
           expect(instance.get('day')).to.be.null;
           input.click();
-          _context9.next = 6;
+          _context11.next = 6;
           return wait();
         case 6:
           input.value = 'xxx';
           dispatchEvent(input, 'input');
-          _context9.next = 10;
+          _context11.next = 10;
           return wait();
         case 10:
           dropdown = getElement('.k-select-menu');
@@ -343,14 +397,14 @@ describe('Select', function () {
           dispatchEvent(document, 'keydown', {
             keyCode: 13
           });
-          _context9.next = 18;
+          _context11.next = 18;
           return wait();
         case 18:
           expect(instance.get('day')).to.eql('xxx');
           expect(input.value).to.eql('xxx');
           // reopen dropdown
           input.click();
-          _context9.next = 23;
+          _context11.next = 23;
           return wait();
         case 23:
           expect(element.innerHTML).to.matchSnapshot();
@@ -358,7 +412,7 @@ describe('Select', function () {
           // input another custom option
           input.value = 'yyy';
           dispatchEvent(input, 'input');
-          _context9.next = 29;
+          _context11.next = 29;
           return wait();
         case 29:
           expect(element.innerHTML).to.matchSnapshot();
@@ -368,29 +422,29 @@ describe('Select', function () {
           expect(newCreateOption.textContent).to.contain('yyy');
           // click outside to cancel selection
           dispatchEvent(document, 'click');
-          _context9.next = 37;
+          _context11.next = 37;
           return wait();
         case 37:
           expect(element.innerHTML).to.matchSnapshot();
           expect(instance.get('day')).to.eql('xxx'); // should keep the original value
           expect(input.value).to.eql('xxx'); // should restore the original value
           // test multiple creatable
-          _element$querySelecto6 = element.querySelectorAll('.k-input-inner'), multipleInput = _element$querySelecto6[1];
+          _element$querySelecto7 = element.querySelectorAll('.k-input-inner'), multipleInput = _element$querySelecto7[1];
           expect(instance.get('days')).to.eql([]);
           multipleInput.click();
-          _context9.next = 45;
+          _context11.next = 45;
           return wait();
         case 45:
           multipleInput.value = 'custom1';
           dispatchEvent(multipleInput, 'input');
-          _context9.next = 49;
+          _context11.next = 49;
           return wait();
         case 49:
           // press enter to create and select the first custom option
           dispatchEvent(document, 'keydown', {
             keyCode: 13
           });
-          _context9.next = 52;
+          _context11.next = 52;
           return wait();
         case 52:
           expect(instance.get('days')).to.include('custom1');
@@ -399,7 +453,7 @@ describe('Select', function () {
           dispatchEvent(document, 'keydown', {
             keyCode: 13
           });
-          _context9.next = 57;
+          _context11.next = 57;
           return wait();
         case 57:
           expect(instance.get('days')).to.eql([]);
@@ -407,37 +461,37 @@ describe('Select', function () {
           // test select original options
           multipleInput.value = 'Monday';
           dispatchEvent(multipleInput, 'input');
-          _context9.next = 63;
+          _context11.next = 63;
           return wait();
         case 63:
           multipleDropdown = getElement('.k-select-menu');
           mondayOption = multipleDropdown.querySelector('.k-select-option');
           expect(mondayOption.textContent).to.eql('星期一');
           mondayOption.click();
-          _context9.next = 69;
+          _context11.next = 69;
           return wait();
         case 69:
           expect(instance.get('days')).to.include('Monday');
         case 70:
         case "end":
-          return _context9.stop();
+          return _context11.stop();
       }
-    }, _callee8);
+    }, _callee10);
   })));
-  it('keepKeywords', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9() {
-    var KeepKeywordsDemo, _mount10, instance, element, input, dropdown, mondayOption;
-    return _regeneratorRuntime.wrap(function _callee9$(_context11) {
-      while (1) switch (_context11.prev = _context11.next) {
+  it('keepKeywords', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee11() {
+    var KeepKeywordsDemo, _mount11, instance, element, input, dropdown, mondayOption;
+    return _regeneratorRuntime.wrap(function _callee11$(_context13) {
+      while (1) switch (_context13.prev = _context13.next) {
         case 0:
           KeepKeywordsDemo = /*#__PURE__*/function (_Component2) {
             _inheritsLoose(KeepKeywordsDemo, _Component2);
             function KeepKeywordsDemo() {
-              var _context10;
+              var _context12;
               var _this2;
               for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
                 args[_key2] = arguments[_key2];
               }
-              _this2 = _Component2.call.apply(_Component2, _concatInstanceProperty(_context10 = [this]).call(_context10, args)) || this;
+              _this2 = _Component2.call.apply(_Component2, _concatInstanceProperty(_context12 = [this]).call(_context12, args)) || this;
               _this2.Select = Select;
               _this2.Option = Option;
               return _this2;
@@ -450,15 +504,15 @@ describe('Select', function () {
             return KeepKeywordsDemo;
           }(Component);
           KeepKeywordsDemo.template = "\n                const {Select, Option} = this;\n                <div>\n                    <Select v-model=\"days\" filterable multiple creatable keepKeywords={false}>\n                        <Option value=\"Monday\">\u661F\u671F\u4E00</Option>\n                        <Option value=\"Tuesday\">\u661F\u671F\u4E8C</Option>\n                        <Option value=\"Wednesday\">\u661F\u671F\u4E09</Option>\n                    </Select>\n                </div>\n            ";
-          _mount10 = mount(KeepKeywordsDemo), instance = _mount10[0], element = _mount10[1];
+          _mount11 = mount(KeepKeywordsDemo), instance = _mount11[0], element = _mount11[1];
           input = element.querySelector('.k-input-inner'); // input custom option "custom1"
           input.click();
-          _context11.next = 7;
+          _context13.next = 7;
           return wait();
         case 7:
           input.value = 'custom1';
           dispatchEvent(input, 'input');
-          _context11.next = 11;
+          _context13.next = 11;
           return wait();
         case 11:
           // check the created option appears in dropdown
@@ -468,7 +522,7 @@ describe('Select', function () {
           dispatchEvent(document, 'keydown', {
             keyCode: 13
           });
-          _context11.next = 16;
+          _context13.next = 16;
           return wait();
         case 16:
           // check the option is selected, and the input is cleared
@@ -477,14 +531,14 @@ describe('Select', function () {
           // input the same option "custom1" again
           input.value = 'custom1';
           dispatchEvent(input, 'input');
-          _context11.next = 22;
+          _context13.next = 22;
           return wait();
         case 22:
           // press enter again
           dispatchEvent(document, 'keydown', {
             keyCode: 13
           });
-          _context11.next = 25;
+          _context13.next = 25;
           return wait();
         case 25:
           // check the option is still selected (not be unselected), and the input is cleared
@@ -493,13 +547,13 @@ describe('Select', function () {
           // input another custom option "custom2"
           input.value = 'custom2';
           dispatchEvent(input, 'input');
-          _context11.next = 31;
+          _context13.next = 31;
           return wait();
         case 31:
           dispatchEvent(document, 'keydown', {
             keyCode: 13
           });
-          _context11.next = 34;
+          _context13.next = 34;
           return wait();
         case 34:
           // check two options are selected
@@ -507,45 +561,45 @@ describe('Select', function () {
           expect(input.value).to.eql('');
           // test the normal behavior of original options
           input.click();
-          _context11.next = 39;
+          _context13.next = 39;
           return wait();
         case 39:
           mondayOption = dropdown.querySelector('[data-value="Monday"]');
           if (!mondayOption) {
-            _context11.next = 49;
+            _context13.next = 49;
             break;
           }
           mondayOption.click();
-          _context11.next = 44;
+          _context13.next = 44;
           return wait();
         case 44:
           expect(instance.get('days')).to.include('Monday');
           // click again should be unselected (original options are not affected by keepKeywords)
           mondayOption.click();
-          _context11.next = 48;
+          _context13.next = 48;
           return wait();
         case 48:
           expect(instance.get('days')).to.not.include('Monday');
         case 49:
         case "end":
-          return _context11.stop();
+          return _context13.stop();
       }
-    }, _callee9);
+    }, _callee11);
   })));
-  it('Tooltip with Select', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10() {
-    var Demo, _mount11, instance, element;
-    return _regeneratorRuntime.wrap(function _callee10$(_context13) {
-      while (1) switch (_context13.prev = _context13.next) {
+  it('Tooltip with Select', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee12() {
+    var Demo, _mount12, instance, element;
+    return _regeneratorRuntime.wrap(function _callee12$(_context15) {
+      while (1) switch (_context15.prev = _context15.next) {
         case 0:
           Demo = /*#__PURE__*/function (_Component3) {
             _inheritsLoose(Demo, _Component3);
             function Demo() {
-              var _context12;
+              var _context14;
               var _this3;
               for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
                 args[_key3] = arguments[_key3];
               }
-              _this3 = _Component3.call.apply(_Component3, _concatInstanceProperty(_context12 = [this]).call(_context12, args)) || this;
+              _this3 = _Component3.call.apply(_Component3, _concatInstanceProperty(_context14 = [this]).call(_context14, args)) || this;
               _this3.Tooltip = Tooltip;
               _this3.Select = Select;
               _this3.Option = Option;
@@ -554,28 +608,28 @@ describe('Select', function () {
             return Demo;
           }(Component);
           Demo.template = "\n                const {Tooltip, Select, Option} = this;\n                <Tooltip content=\"hello\">\n                    <Select><Option value=\"1\">option 1</Option></Select>\n                </Tooltip>\n            ";
-          _mount11 = mount(Demo), instance = _mount11[0], element = _mount11[1];
+          _mount12 = mount(Demo), instance = _mount12[0], element = _mount12[1];
           element.click();
-          _context13.next = 6;
+          _context15.next = 6;
           return wait();
         case 6:
           expect(getElement('.k-select-menu')).to.be.exist;
           expect(getElement('.k-tooltip-content')).to.be.exist;
         case 8:
         case "end":
-          return _context13.stop();
+          return _context15.stop();
       }
-    }, _callee10);
+    }, _callee12);
   })));
-  it('Searchable with multiple', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee11() {
-    var _mount12, instance, element, _element$querySelecto7, select, dropdown, _dropdown$querySelect2, selectAll, toggleSelect, unselectAll, _dropdown$querySelect3, cancel, confirm, input;
-    return _regeneratorRuntime.wrap(function _callee11$(_context14) {
-      while (1) switch (_context14.prev = _context14.next) {
+  it('Searchable with multiple', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee13() {
+    var _mount13, instance, element, _element$querySelecto8, select, dropdown, _dropdown$querySelect2, selectAll, toggleSelect, unselectAll, _dropdown$querySelect3, cancel, confirm, input;
+    return _regeneratorRuntime.wrap(function _callee13$(_context16) {
+      while (1) switch (_context16.prev = _context16.next) {
         case 0:
-          _mount12 = mount(SearchableDemo), instance = _mount12[0], element = _mount12[1];
-          _element$querySelecto7 = element.querySelectorAll('.k-select'), select = _element$querySelecto7[1];
+          _mount13 = mount(SearchableDemo), instance = _mount13[0], element = _mount13[1];
+          _element$querySelecto8 = element.querySelectorAll('.k-select'), select = _element$querySelecto8[1];
           select.click();
-          _context14.next = 5;
+          _context16.next = 5;
           return wait();
         case 5:
           dropdown = getElement('.k-select-menu');
@@ -583,63 +637,63 @@ describe('Select', function () {
           _dropdown$querySelect3 = dropdown.querySelectorAll('.k-select-footer .k-btn'), cancel = _dropdown$querySelect3[0], confirm = _dropdown$querySelect3[1]; // select all
           selectAll.click();
           confirm.click();
-          _context14.next = 12;
+          _context16.next = 12;
           return wait();
         case 12:
           expect(instance.get('days')).have.length(6);
           // unselect all
           select.click();
-          _context14.next = 16;
+          _context16.next = 16;
           return wait();
         case 16:
           unselectAll.click();
           confirm.click();
-          _context14.next = 20;
+          _context16.next = 20;
           return wait();
         case 20:
           expect(instance.get('days')).have.length(0);
           // toggle select
           select.click();
-          _context14.next = 24;
+          _context16.next = 24;
           return wait();
         case 24:
           instance.set('days', ['Monday', 'Tuesday']);
-          _context14.next = 27;
+          _context16.next = 27;
           return wait();
         case 27:
           input = dropdown.querySelector('.k-input-inner');
           input.value = 's';
           dispatchEvent(input, 'input');
-          _context14.next = 32;
+          _context16.next = 32;
           return wait();
         case 32:
           toggleSelect.click();
           confirm.click();
-          _context14.next = 36;
+          _context16.next = 36;
           return wait();
         case 36:
           expect(instance.get('days')).have.length(5);
           expect(instance.get('days')).include('Monday');
         case 38:
         case "end":
-          return _context14.stop();
+          return _context16.stop();
       }
-    }, _callee11);
+    }, _callee13);
   })));
-  it('Searchable with multiple should show correct initial checkbox state', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee12() {
-    var Demo, _mount13, instance, element, dropdown, checkboxes, options, tuesdayCheckbox, tuesdayOption, _dropdown$querySelect4, cancel, dropdown2, checkboxes2, options2, tuesdayCheckbox2, tuesdayOption2;
-    return _regeneratorRuntime.wrap(function _callee12$(_context16) {
-      while (1) switch (_context16.prev = _context16.next) {
+  it('Searchable with multiple should show correct initial checkbox state', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee14() {
+    var Demo, _mount14, instance, element, dropdown, checkboxes, options, tuesdayCheckbox, tuesdayOption, _dropdown$querySelect4, cancel, dropdown2, checkboxes2, options2, tuesdayCheckbox2, tuesdayOption2;
+    return _regeneratorRuntime.wrap(function _callee14$(_context18) {
+      while (1) switch (_context18.prev = _context18.next) {
         case 0:
           Demo = /*#__PURE__*/function (_Component4) {
             _inheritsLoose(Demo, _Component4);
             function Demo() {
-              var _context15;
+              var _context17;
               var _this4;
               for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
                 args[_key4] = arguments[_key4];
               }
-              _this4 = _Component4.call.apply(_Component4, _concatInstanceProperty(_context15 = [this]).call(_context15, args)) || this;
+              _this4 = _Component4.call.apply(_Component4, _concatInstanceProperty(_context17 = [this]).call(_context17, args)) || this;
               _this4.Tooltip = Tooltip;
               _this4.Select = Select;
               _this4.Option = Option;
@@ -653,11 +707,11 @@ describe('Select', function () {
             return Demo;
           }(Component);
           Demo.template = "\n                const {Select, Option} = this;\n                <Select v-model=\"days\" searchable multiple>\n                    <Option value=\"Monday\" disabled>\u661F\u671F\u4E00</Option>\n                    <Option value=\"Tuesday\">\u661F\u671F\u4E8C</Option>\n                    <Option value=\"Wednesday\">\u661F\u671F\u4E09</Option>\n                    <Option value=\"Thursday\">\u661F\u671F\u56DB</Option>\n                    <Option value=\"Friday\">\u661F\u671F\u4E94</Option>\n                    <Option value=\"Saturday\">\u661F\u671F\u516D</Option>\n                    <Option value=\"Sunday\">\u661F\u671F\u5929</Option>\n                    <b:values args=\"[value]\">\n                        <div class=\"k-value\">\n                            \u5DF2\u9009\u62E9{value.length}\u9879 / \u51717\u9879\n                        </div>\n                    </b:values>\n                </Select>\n            ";
-          _mount13 = mount(Demo), instance = _mount13[0], element = _mount13[1];
+          _mount14 = mount(Demo), instance = _mount14[0], element = _mount14[1];
           expect(instance.get('days')).to.eql(['Tuesday']);
           // first open dropdown, check initial state
           element.click();
-          _context16.next = 7;
+          _context18.next = 7;
           return wait();
         case 7:
           dropdown = getElement('.k-select-menu');
@@ -681,12 +735,12 @@ describe('Select', function () {
           // close dropdown
           _dropdown$querySelect4 = dropdown.querySelectorAll('.k-select-footer .k-btn'), cancel = _dropdown$querySelect4[0];
           cancel.click();
-          _context16.next = 21;
+          _context18.next = 21;
           return wait();
         case 21:
           // reopen dropdown, check the state is still correct
           element.click();
-          _context16.next = 24;
+          _context18.next = 24;
           return wait();
         case 24:
           dropdown2 = getElement('.k-select-menu');
@@ -706,70 +760,70 @@ describe('Select', function () {
           expect(tuesdayOption2.className).to.include('k-active');
         case 32:
         case "end":
-          return _context16.stop();
+          return _context18.stop();
       }
-    }, _callee12);
+    }, _callee14);
   })));
-  it('disabled option does not allow clearable and close', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee13() {
-    var _mount14, instance, element, _element$querySelecto8, clear1, _element$querySelecto9, tag1, _element$querySelecto10, clear2, _element$querySelecto11, clear3;
-    return _regeneratorRuntime.wrap(function _callee13$(_context17) {
-      while (1) switch (_context17.prev = _context17.next) {
+  it('disabled option does not allow clearable and close', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee15() {
+    var _mount15, instance, element, _element$querySelecto9, clear1, _element$querySelecto10, tag1, _element$querySelecto11, clear2, _element$querySelecto12, clear3;
+    return _regeneratorRuntime.wrap(function _callee15$(_context19) {
+      while (1) switch (_context19.prev = _context19.next) {
         case 0:
-          _mount14 = mount(ImmutableDemo), instance = _mount14[0], element = _mount14[1];
+          _mount15 = mount(ImmutableDemo), instance = _mount15[0], element = _mount15[1];
           instance.set('days', ['Tuesday', 'Friday']);
-          _context17.next = 4;
+          _context19.next = 4;
           return wait();
         case 4:
           expect(element.outerHTML).to.matchSnapshot();
-          _element$querySelecto8 = element.querySelectorAll('.k-select-clear'), clear1 = _element$querySelecto8[0];
+          _element$querySelecto9 = element.querySelectorAll('.k-select-clear'), clear1 = _element$querySelecto9[0];
           clear1.click();
-          _context17.next = 9;
+          _context19.next = 9;
           return wait();
         case 9:
-          _element$querySelecto9 = element.querySelectorAll('.k-tag'), tag1 = _element$querySelecto9[0];
+          _element$querySelecto10 = element.querySelectorAll('.k-tag'), tag1 = _element$querySelecto10[0];
           expect(tag1.className).not.contain("k-closable");
           expect(instance.get('days')).to.eql(['Tuesday', 'Friday']);
           instance.set('days', ['Monday', 'Tuesday']);
-          _context17.next = 15;
+          _context19.next = 15;
           return wait();
         case 15:
-          _element$querySelecto10 = element.querySelectorAll('.k-select-clear'), clear2 = _element$querySelecto10[0];
+          _element$querySelecto11 = element.querySelectorAll('.k-select-clear'), clear2 = _element$querySelecto11[0];
           clear2.click();
-          _context17.next = 19;
+          _context19.next = 19;
           return wait();
         case 19:
           expect(instance.get('days')).to.eql(['Tuesday']);
           instance.set('days', ['Monday', 'Wednesday']);
-          _context17.next = 23;
+          _context19.next = 23;
           return wait();
         case 23:
-          _element$querySelecto11 = element.querySelectorAll('.k-select-clear'), clear3 = _element$querySelecto11[0];
+          _element$querySelecto12 = element.querySelectorAll('.k-select-clear'), clear3 = _element$querySelecto12[0];
           clear3.click();
-          _context17.next = 27;
+          _context19.next = 27;
           return wait();
         case 27:
           expect(instance.get('days')).to.eql([]);
           // expect(clear).to.be.null;
         case 28:
         case "end":
-          return _context17.stop();
+          return _context19.stop();
       }
-    }, _callee13);
+    }, _callee15);
   })));
-  it('should handle async data correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee14() {
-    var Demo, _mount15, instance, element, wrapper, phantom;
-    return _regeneratorRuntime.wrap(function _callee14$(_context19) {
-      while (1) switch (_context19.prev = _context19.next) {
+  it('should handle async data correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee16() {
+    var Demo, _mount16, instance, element, wrapper, phantom;
+    return _regeneratorRuntime.wrap(function _callee16$(_context21) {
+      while (1) switch (_context21.prev = _context21.next) {
         case 0:
           Demo = /*#__PURE__*/function (_Component5) {
             _inheritsLoose(Demo, _Component5);
             function Demo() {
-              var _context18;
+              var _context20;
               var _this5;
               for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
                 args[_key5] = arguments[_key5];
               }
-              _this5 = _Component5.call.apply(_Component5, _concatInstanceProperty(_context18 = [this]).call(_context18, args)) || this;
+              _this5 = _Component5.call.apply(_Component5, _concatInstanceProperty(_context20 = [this]).call(_context20, args)) || this;
               _this5.Select = Select;
               _this5.Option = Option;
               return _this5;
@@ -782,8 +836,8 @@ describe('Select', function () {
             return Demo;
           }(Component);
           Demo.template = "\n                const {Select, Option} = this;\n                <Select v-model=\"day\" virtual>\n                    <Option v-for={this.get('list')} value={$value}>\n                        {$value}\n                    </Option>\n                </Select>\n            ";
-          _mount15 = mount(Demo), instance = _mount15[0], element = _mount15[1];
-          _context19.next = 5;
+          _mount16 = mount(Demo), instance = _mount16[0], element = _mount16[1];
+          _context21.next = 5;
           return wait();
         case 5:
           // simulate async data loading
@@ -792,11 +846,11 @@ describe('Select', function () {
           }, function (_, i) {
             return i;
           }));
-          _context19.next = 8;
+          _context21.next = 8;
           return wait(100);
         case 8:
           element.click();
-          _context19.next = 11;
+          _context21.next = 11;
           return wait();
         case 11:
           wrapper = getElement('.k-virtual-wrapper');
@@ -805,9 +859,9 @@ describe('Select', function () {
           expect(phantom.style.height).to.be.equal('3000px');
         case 15:
         case "end":
-          return _context19.stop();
+          return _context21.stop();
       }
-    }, _callee14);
+    }, _callee16);
   })));
   // it('should trigger change event correctly', async () => {
   // const spy = sinon.spy();