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

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:
-          _mount8 = mount(BasicDemo), instance = _mount8[0], element = _mount8[1];
+          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:
+          _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,85 +360,138 @@ 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;
-    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 = 5;
+          _context11.next = 6;
           return wait();
-        case 5:
+        case 6:
           input.value = 'xxx';
           dispatchEvent(input, 'input');
-          _context9.next = 9;
+          _context11.next = 10;
           return wait();
-        case 9:
+        case 10:
           dropdown = getElement('.k-select-menu');
           expect(dropdown.innerHTML).to.matchSnapshot();
-          // select
+          // check the created option appears in dropdown
+          createOption = dropdown.querySelector('.k-select-option');
+          expect(createOption).to.exist;
+          expect(createOption.textContent).to.contain('xxx');
+          // press enter to select the custom option
           dispatchEvent(document, 'keydown', {
             keyCode: 13
           });
-          _context9.next = 14;
+          _context11.next = 18;
           return wait();
-        case 14:
+        case 18:
           expect(instance.get('day')).to.eql('xxx');
-          // open again
+          expect(input.value).to.eql('xxx');
+          // reopen dropdown
           input.click();
-          _context9.next = 18;
+          _context11.next = 23;
           return wait();
-        case 18:
+        case 23:
           expect(element.innerHTML).to.matchSnapshot();
           expect(dropdown.innerHTML).to.matchSnapshot();
-          // input again
+          // input another custom option
           input.value = 'yyy';
           dispatchEvent(input, 'input');
-          _context9.next = 24;
+          _context11.next = 29;
           return wait();
-        case 24:
+        case 29:
           expect(element.innerHTML).to.matchSnapshot();
           expect(dropdown.innerHTML).to.matchSnapshot();
-          // discard
+          newCreateOption = dropdown.querySelector('.k-select-option');
+          expect(newCreateOption).to.exist;
+          expect(newCreateOption.textContent).to.contain('yyy');
+          // click outside to cancel selection
           dispatchEvent(document, 'click');
-          _context9.next = 29;
+          _context11.next = 37;
           return wait();
-        case 29:
+        case 37:
           expect(element.innerHTML).to.matchSnapshot();
-          expect(instance.get('day')).to.eql('xxx');
-        case 31:
+          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$querySelecto7 = element.querySelectorAll('.k-input-inner'), multipleInput = _element$querySelecto7[1];
+          expect(instance.get('days')).to.eql([]);
+          multipleInput.click();
+          _context11.next = 45;
+          return wait();
+        case 45:
+          multipleInput.value = 'custom1';
+          dispatchEvent(multipleInput, 'input');
+          _context11.next = 49;
+          return wait();
+        case 49:
+          // press enter to create and select the first custom option
+          dispatchEvent(document, 'keydown', {
+            keyCode: 13
+          });
+          _context11.next = 52;
+          return wait();
+        case 52:
+          expect(instance.get('days')).to.include('custom1');
+          expect(multipleInput.value).to.eql('custom1');
+          // input the same option again
+          dispatchEvent(document, 'keydown', {
+            keyCode: 13
+          });
+          _context11.next = 57;
+          return wait();
+        case 57:
+          expect(instance.get('days')).to.eql([]);
+          expect(multipleInput.value).to.eql('custom1');
+          // test select original options
+          multipleInput.value = 'Monday';
+          dispatchEvent(multipleInput, 'input');
+          _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();
+          _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:
-          // 创建一个测试组件，包含keepKeywords功能
           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;
@@ -396,103 +503,103 @@ describe('Select', function () {
             };
             return KeepKeywordsDemo;
           }(Component);
-          KeepKeywordsDemo.template = "\n                const {Select, Option} = this;\n                <div>\n                    <Select v-model=\"days\" filterable multiple creatable keepKeywords>\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];
-          input = element.querySelector('.k-input-inner'); // 1. 输入自定义选项 "custom1"
+          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            ";
+          _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:
-          // 验证创建的选项出现在dropdown中
+          // check the created option appears in dropdown
           dropdown = getElement('.k-select-menu');
           expect(dropdown.innerHTML).to.contain('custom1');
-          // 2. 按回车创建并选中
+          // press enter to create and select
           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
           expect(instance.get('days')).to.eql(['custom1']);
-          expect(input.value).to.eql(''); // keepKeywords=true时应该清空输入框
-          // 3. 再次输入相同的选项 "custom1"
+          expect(input.value).to.eql('');
+          // input the same option "custom1" again
           input.value = 'custom1';
           dispatchEvent(input, 'input');
-          _context11.next = 22;
+          _context13.next = 22;
           return wait();
         case 22:
-          // 4. 再次按回车
+          // press enter again
           dispatchEvent(document, 'keydown', {
             keyCode: 13
           });
-          _context11.next = 25;
+          _context13.next = 25;
           return wait();
         case 25:
-          // 验证选项仍然被选中（不会被取消选中），且输入框被清空
-          expect(instance.get('days')).to.eql(['custom1']); // 应该保持选中状态
-          expect(input.value).to.eql(''); // 输入框应该被清空
-          // 5. 输入另一个自定义选项 "custom2"
+          // check the option is still selected (not be unselected), and the input is cleared
+          expect(instance.get('days')).to.eql(['custom1']); // should be selected
+          expect(input.value).to.eql(''); // should be cleared
+          // 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
           expect(instance.get('days')).to.eql(['custom1', 'custom2']);
           expect(input.value).to.eql('');
-          // 6. 测试原有选项的正常行为
+          // 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');
-          // 再次点击应该能取消选中（原有选项不受keepKeywords影响）
+          // 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;
@@ -501,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$querySelecto6, 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$querySelecto6 = element.querySelectorAll('.k-select'), select = _element$querySelecto6[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');
@@ -530,65 +637,86 @@ 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 _mount13, instance, element, _element$querySelecto7, select, dropdown, checkboxes, options, tuesdayCheckbox, tuesdayOption, _dropdown$querySelect4, cancel, dropdown2, checkboxes2, options2, tuesdayCheckbox2, tuesdayOption2;
-    return _regeneratorRuntime.wrap(function _callee12$(_context15) {
-      while (1) switch (_context15.prev = _context15.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:
-          _mount13 = mount(SearchableDemo), instance = _mount13[0], element = _mount13[1]; // 验证初始值
+          Demo = /*#__PURE__*/function (_Component4) {
+            _inheritsLoose(Demo, _Component4);
+            function Demo() {
+              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(_context17 = [this]).call(_context17, args)) || this;
+              _this4.Tooltip = Tooltip;
+              _this4.Select = Select;
+              _this4.Option = Option;
+              return _this4;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                days: ['Tuesday']
+              };
+            };
+            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            ";
+          _mount14 = mount(Demo), instance = _mount14[0], element = _mount14[1];
           expect(instance.get('days')).to.eql(['Tuesday']);
-          // 第一次打开dropdown，检查初始状态
-          _element$querySelecto7 = element.querySelectorAll('.k-select'), select = _element$querySelecto7[1];
-          select.click();
-          _context15.next = 6;
+          // first open dropdown, check initial state
+          element.click();
+          _context18.next = 7;
           return wait();
-        case 6:
+        case 7:
           dropdown = getElement('.k-select-menu');
           checkboxes = dropdown.querySelectorAll('.k-checkbox input[type="checkbox"]');
-          options = dropdown.querySelectorAll('.k-select-option'); // 找到Tuesday选项对应的checkbox
+          options = dropdown.querySelectorAll('.k-select-option'); // find the checkbox of Tuesday option
           tuesdayCheckbox = null;
           tuesdayOption = null;
           options.forEach(function (option, index) {
@@ -598,23 +726,23 @@ describe('Select', function () {
               tuesdayOption = option;
             }
           });
-          // 验证Tuesday的checkbox应该被选中
+          // check the checkbox of Tuesday should be checked
           expect(tuesdayCheckbox).to.exist;
           expect(tuesdayCheckbox.checked).to.be.true;
-          // 验证Tuesday选项应该有active样式
+          // check the Tuesday option should have active style
           expect(tuesdayOption).to.exist;
           expect(tuesdayOption.className).to.include('k-active');
-          // 关闭dropdown
+          // close dropdown
           _dropdown$querySelect4 = dropdown.querySelectorAll('.k-select-footer .k-btn'), cancel = _dropdown$querySelect4[0];
           cancel.click();
-          _context15.next = 20;
+          _context18.next = 21;
           return wait();
-        case 20:
-          // 再次打开dropdown，验证状态仍然正确
-          select.click();
-          _context15.next = 23;
+        case 21:
+          // reopen dropdown, check the state is still correct
+          element.click();
+          _context18.next = 24;
           return wait();
-        case 23:
+        case 24:
           dropdown2 = getElement('.k-select-menu');
           checkboxes2 = dropdown2.querySelectorAll('.k-checkbox input[type="checkbox"]');
           options2 = dropdown2.querySelectorAll('.k-select-option');
@@ -627,78 +755,78 @@ describe('Select', function () {
               tuesdayOption2 = option;
             }
           });
-          // 验证第二次打开时状态依然正确
+          // check the state is still correct when reopen
           expect(tuesdayCheckbox2.checked).to.be.true;
           expect(tuesdayOption2.className).to.include('k-active');
-        case 31:
+        case 32:
         case "end":
-          return _context15.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$(_context16) {
-      while (1) switch (_context16.prev = _context16.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']);
-          _context16.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();
-          _context16.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']);
-          _context16.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();
-          _context16.next = 19;
+          _context19.next = 19;
           return wait();
         case 19:
           expect(instance.get('days')).to.eql(['Tuesday']);
           instance.set('days', ['Monday', 'Wednesday']);
-          _context16.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();
-          _context16.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 _context16.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$(_context18) {
-      while (1) switch (_context18.prev = _context18.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 (_Component4) {
-            _inheritsLoose(Demo, _Component4);
+          Demo = /*#__PURE__*/function (_Component5) {
+            _inheritsLoose(Demo, _Component5);
             function Demo() {
-              var _context17;
-              var _this4;
-              for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
-                args[_key4] = arguments[_key4];
+              var _context20;
+              var _this5;
+              for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
+                args[_key5] = arguments[_key5];
               }
-              _this4 = _Component4.call.apply(_Component4, _concatInstanceProperty(_context17 = [this]).call(_context17, args)) || this;
-              _this4.Select = Select;
-              _this4.Option = Option;
-              return _this4;
+              _this5 = _Component5.call.apply(_Component5, _concatInstanceProperty(_context20 = [this]).call(_context20, args)) || this;
+              _this5.Select = Select;
+              _this5.Option = Option;
+              return _this5;
             }
             Demo.defaults = function defaults() {
               return {
@@ -708,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];
-          _context18.next = 5;
+          _mount16 = mount(Demo), instance = _mount16[0], element = _mount16[1];
+          _context21.next = 5;
           return wait();
         case 5:
           // simulate async data loading
@@ -718,11 +846,11 @@ describe('Select', function () {
           }, function (_, i) {
             return i;
           }));
-          _context18.next = 8;
+          _context21.next = 8;
           return wait(100);
         case 8:
           element.click();
-          _context18.next = 11;
+          _context21.next = 11;
           return wait();
         case 11:
           wrapper = getElement('.k-virtual-wrapper');
@@ -731,9 +859,9 @@ describe('Select', function () {
           expect(phantom.style.height).to.be.equal('3000px');
         case 15:
         case "end":
-          return _context18.stop();
+          return _context21.stop();
       }
-    }, _callee14);
+    }, _callee16);
   })));
   // it('should trigger change event correctly', async () => {
   // const spy = sinon.spy();