@king-design/react 3.5.2 → 3.6.0

package/components/select/index.spec.js

@@ -1,6 +1,7 @@
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/includes";
 import _Array$from from "@babel/runtime-corejs3/core-js/array/from";
 import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import BasicDemo from '~/components/select/demos/basic';
@@ -316,103 +317,265 @@ describe('Select', function () {
     }, _callee7);
   })));
   it('creatable', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
-    var _mount9, instance, element, input, dropdown;
+    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) {
         case 0:
           _mount9 = mount(CreatableDemo), instance = _mount9[0], element = _mount9[1];
           input = element.querySelector('.k-input-inner');
+          expect(instance.get('day')).to.be.null;
           input.click();
-          _context9.next = 5;
+          _context9.next = 6;
           return wait();
-        case 5:
+        case 6:
           input.value = 'xxx';
           dispatchEvent(input, 'input');
-          _context9.next = 9;
+          _context9.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;
+          _context9.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;
+          _context9.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;
+          _context9.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;
+          _context9.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$querySelecto6 = element.querySelectorAll('.k-input-inner'), multipleInput = _element$querySelecto6[1];
+          expect(instance.get('days')).to.eql([]);
+          multipleInput.click();
+          _context9.next = 45;
+          return wait();
+        case 45:
+          multipleInput.value = 'custom1';
+          dispatchEvent(multipleInput, 'input');
+          _context9.next = 49;
+          return wait();
+        case 49:
+          // press enter to create and select the first custom option
+          dispatchEvent(document, 'keydown', {
+            keyCode: 13
+          });
+          _context9.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
+          });
+          _context9.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');
+          _context9.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;
+          return wait();
+        case 69:
+          expect(instance.get('days')).to.include('Monday');
+        case 70:
         case "end":
           return _context9.stop();
       }
     }, _callee8);
   })));
-  it('Tooltip with Select', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9() {
-    var Demo, _mount10, instance, element;
+  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) {
         case 0:
-          Demo = /*#__PURE__*/function (_Component2) {
-            _inheritsLoose(Demo, _Component2);
-            function Demo() {
+          KeepKeywordsDemo = /*#__PURE__*/function (_Component2) {
+            _inheritsLoose(KeepKeywordsDemo, _Component2);
+            function KeepKeywordsDemo() {
               var _context10;
               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.Tooltip = Tooltip;
               _this2.Select = Select;
               _this2.Option = Option;
               return _this2;
             }
+            KeepKeywordsDemo.defaults = function defaults() {
+              return {
+                days: []
+              };
+            };
+            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];
+          input = element.querySelector('.k-input-inner'); // input custom option "custom1"
+          input.click();
+          _context11.next = 7;
+          return wait();
+        case 7:
+          input.value = 'custom1';
+          dispatchEvent(input, 'input');
+          _context11.next = 11;
+          return wait();
+        case 11:
+          // check the created option appears in dropdown
+          dropdown = getElement('.k-select-menu');
+          expect(dropdown.innerHTML).to.contain('custom1');
+          // press enter to create and select
+          dispatchEvent(document, 'keydown', {
+            keyCode: 13
+          });
+          _context11.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('');
+          // input the same option "custom1" again
+          input.value = 'custom1';
+          dispatchEvent(input, 'input');
+          _context11.next = 22;
+          return wait();
+        case 22:
+          // press enter again
+          dispatchEvent(document, 'keydown', {
+            keyCode: 13
+          });
+          _context11.next = 25;
+          return wait();
+        case 25:
+          // 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;
+          return wait();
+        case 31:
+          dispatchEvent(document, 'keydown', {
+            keyCode: 13
+          });
+          _context11.next = 34;
+          return wait();
+        case 34:
+          // check two options are selected
+          expect(instance.get('days')).to.eql(['custom1', 'custom2']);
+          expect(input.value).to.eql('');
+          // test the normal behavior of original options
+          input.click();
+          _context11.next = 39;
+          return wait();
+        case 39:
+          mondayOption = dropdown.querySelector('[data-value="Monday"]');
+          if (!mondayOption) {
+            _context11.next = 49;
+            break;
+          }
+          mondayOption.click();
+          _context11.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;
+          return wait();
+        case 48:
+          expect(instance.get('days')).to.not.include('Monday');
+        case 49:
+        case "end":
+          return _context11.stop();
+      }
+    }, _callee9);
+  })));
+  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) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component3) {
+            _inheritsLoose(Demo, _Component3);
+            function Demo() {
+              var _context12;
+              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.Tooltip = Tooltip;
+              _this3.Select = Select;
+              _this3.Option = Option;
+              return _this3;
+            }
             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            ";
-          _mount10 = mount(Demo), instance = _mount10[0], element = _mount10[1];
+          _mount11 = mount(Demo), instance = _mount11[0], element = _mount11[1];
           element.click();
-          _context11.next = 6;
+          _context13.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 _context11.stop();
+          return _context13.stop();
       }
-    }, _callee9);
+    }, _callee10);
   })));
-  it('Searchable with multiple', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10() {
-    var _mount11, instance, element, _element$querySelecto6, select, dropdown, _dropdown$querySelect2, selectAll, toggleSelect, unselectAll, _dropdown$querySelect3, cancel, confirm, input;
-    return _regeneratorRuntime.wrap(function _callee10$(_context12) {
-      while (1) switch (_context12.prev = _context12.next) {
+  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) {
         case 0:
-          _mount11 = mount(SearchableDemo), instance = _mount11[0], element = _mount11[1];
-          _element$querySelecto6 = element.querySelectorAll('.k-select'), select = _element$querySelecto6[1];
+          _mount12 = mount(SearchableDemo), instance = _mount12[0], element = _mount12[1];
+          _element$querySelecto7 = element.querySelectorAll('.k-select'), select = _element$querySelecto7[1];
           select.click();
-          _context12.next = 5;
+          _context14.next = 5;
           return wait();
         case 5:
           dropdown = getElement('.k-select-menu');
@@ -420,112 +583,196 @@ 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();
-          _context12.next = 12;
+          _context14.next = 12;
           return wait();
         case 12:
           expect(instance.get('days')).have.length(6);
           // unselect all
           select.click();
-          _context12.next = 16;
+          _context14.next = 16;
           return wait();
         case 16:
           unselectAll.click();
           confirm.click();
-          _context12.next = 20;
+          _context14.next = 20;
           return wait();
         case 20:
           expect(instance.get('days')).have.length(0);
           // toggle select
           select.click();
-          _context12.next = 24;
+          _context14.next = 24;
           return wait();
         case 24:
           instance.set('days', ['Monday', 'Tuesday']);
-          _context12.next = 27;
+          _context14.next = 27;
           return wait();
         case 27:
           input = dropdown.querySelector('.k-input-inner');
           input.value = 's';
           dispatchEvent(input, 'input');
-          _context12.next = 32;
+          _context14.next = 32;
           return wait();
         case 32:
           toggleSelect.click();
           confirm.click();
-          _context12.next = 36;
+          _context14.next = 36;
           return wait();
         case 36:
           expect(instance.get('days')).have.length(5);
           expect(instance.get('days')).include('Monday');
         case 38:
         case "end":
-          return _context12.stop();
+          return _context14.stop();
       }
-    }, _callee10);
+    }, _callee11);
   })));
-  it('disabled option does not allow clearable and close', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee11() {
-    var _mount12, instance, element, _element$querySelecto7, clear1, _element$querySelecto8, tag1, _element$querySelecto9, clear2, _element$querySelecto10, clear3;
-    return _regeneratorRuntime.wrap(function _callee11$(_context13) {
-      while (1) switch (_context13.prev = _context13.next) {
+  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) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component4) {
+            _inheritsLoose(Demo, _Component4);
+            function Demo() {
+              var _context15;
+              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.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            ";
+          _mount13 = mount(Demo), instance = _mount13[0], element = _mount13[1];
+          expect(instance.get('days')).to.eql(['Tuesday']);
+          // first open dropdown, check initial state
+          element.click();
+          _context16.next = 7;
+          return wait();
+        case 7:
+          dropdown = getElement('.k-select-menu');
+          checkboxes = dropdown.querySelectorAll('.k-checkbox input[type="checkbox"]');
+          options = dropdown.querySelectorAll('.k-select-option'); // find the checkbox of Tuesday option
+          tuesdayCheckbox = null;
+          tuesdayOption = null;
+          options.forEach(function (option, index) {
+            var _option$textContent;
+            if ((_option$textContent = option.textContent) != null && _includesInstanceProperty(_option$textContent).call(_option$textContent, '星期二')) {
+              tuesdayCheckbox = checkboxes[index];
+              tuesdayOption = option;
+            }
+          });
+          // check the checkbox of Tuesday should be checked
+          expect(tuesdayCheckbox).to.exist;
+          expect(tuesdayCheckbox.checked).to.be.true;
+          // check the Tuesday option should have active style
+          expect(tuesdayOption).to.exist;
+          expect(tuesdayOption.className).to.include('k-active');
+          // close dropdown
+          _dropdown$querySelect4 = dropdown.querySelectorAll('.k-select-footer .k-btn'), cancel = _dropdown$querySelect4[0];
+          cancel.click();
+          _context16.next = 21;
+          return wait();
+        case 21:
+          // reopen dropdown, check the state is still correct
+          element.click();
+          _context16.next = 24;
+          return wait();
+        case 24:
+          dropdown2 = getElement('.k-select-menu');
+          checkboxes2 = dropdown2.querySelectorAll('.k-checkbox input[type="checkbox"]');
+          options2 = dropdown2.querySelectorAll('.k-select-option');
+          tuesdayCheckbox2 = null;
+          tuesdayOption2 = null;
+          options2.forEach(function (option, index) {
+            var _option$textContent2;
+            if ((_option$textContent2 = option.textContent) != null && _includesInstanceProperty(_option$textContent2).call(_option$textContent2, '星期二')) {
+              tuesdayCheckbox2 = checkboxes2[index];
+              tuesdayOption2 = option;
+            }
+          });
+          // check the state is still correct when reopen
+          expect(tuesdayCheckbox2.checked).to.be.true;
+          expect(tuesdayOption2.className).to.include('k-active');
+        case 32:
+        case "end":
+          return _context16.stop();
+      }
+    }, _callee12);
+  })));
+  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) {
         case 0:
-          _mount12 = mount(ImmutableDemo), instance = _mount12[0], element = _mount12[1];
+          _mount14 = mount(ImmutableDemo), instance = _mount14[0], element = _mount14[1];
           instance.set('days', ['Tuesday', 'Friday']);
-          _context13.next = 4;
+          _context17.next = 4;
           return wait();
         case 4:
           expect(element.outerHTML).to.matchSnapshot();
-          _element$querySelecto7 = element.querySelectorAll('.k-select-clear'), clear1 = _element$querySelecto7[0];
+          _element$querySelecto8 = element.querySelectorAll('.k-select-clear'), clear1 = _element$querySelecto8[0];
           clear1.click();
-          _context13.next = 9;
+          _context17.next = 9;
           return wait();
         case 9:
-          _element$querySelecto8 = element.querySelectorAll('.k-tag'), tag1 = _element$querySelecto8[0];
+          _element$querySelecto9 = element.querySelectorAll('.k-tag'), tag1 = _element$querySelecto9[0];
           expect(tag1.className).not.contain("k-closable");
           expect(instance.get('days')).to.eql(['Tuesday', 'Friday']);
           instance.set('days', ['Monday', 'Tuesday']);
-          _context13.next = 15;
+          _context17.next = 15;
           return wait();
         case 15:
-          _element$querySelecto9 = element.querySelectorAll('.k-select-clear'), clear2 = _element$querySelecto9[0];
+          _element$querySelecto10 = element.querySelectorAll('.k-select-clear'), clear2 = _element$querySelecto10[0];
           clear2.click();
-          _context13.next = 19;
+          _context17.next = 19;
           return wait();
         case 19:
           expect(instance.get('days')).to.eql(['Tuesday']);
           instance.set('days', ['Monday', 'Wednesday']);
-          _context13.next = 23;
+          _context17.next = 23;
           return wait();
         case 23:
-          _element$querySelecto10 = element.querySelectorAll('.k-select-clear'), clear3 = _element$querySelecto10[0];
+          _element$querySelecto11 = element.querySelectorAll('.k-select-clear'), clear3 = _element$querySelecto11[0];
           clear3.click();
-          _context13.next = 27;
+          _context17.next = 27;
           return wait();
         case 27:
           expect(instance.get('days')).to.eql([]);
           // expect(clear).to.be.null;
         case 28:
         case "end":
-          return _context13.stop();
+          return _context17.stop();
       }
-    }, _callee11);
+    }, _callee13);
   })));
-  it('should handle async data correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee12() {
-    var Demo, _mount13, instance, element, wrapper, phantom;
-    return _regeneratorRuntime.wrap(function _callee12$(_context15) {
-      while (1) switch (_context15.prev = _context15.next) {
+  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) {
         case 0:
-          Demo = /*#__PURE__*/function (_Component3) {
-            _inheritsLoose(Demo, _Component3);
+          Demo = /*#__PURE__*/function (_Component5) {
+            _inheritsLoose(Demo, _Component5);
             function Demo() {
-              var _context14;
-              var _this3;
-              for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-                args[_key3] = arguments[_key3];
+              var _context18;
+              var _this5;
+              for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
+                args[_key5] = arguments[_key5];
               }
-              _this3 = _Component3.call.apply(_Component3, _concatInstanceProperty(_context14 = [this]).call(_context14, args)) || this;
-              _this3.Select = Select;
-              _this3.Option = Option;
-              return _this3;
+              _this5 = _Component5.call.apply(_Component5, _concatInstanceProperty(_context18 = [this]).call(_context18, args)) || this;
+              _this5.Select = Select;
+              _this5.Option = Option;
+              return _this5;
             }
             Demo.defaults = function defaults() {
               return {
@@ -535,8 +782,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            ";
-          _mount13 = mount(Demo), instance = _mount13[0], element = _mount13[1];
-          _context15.next = 5;
+          _mount15 = mount(Demo), instance = _mount15[0], element = _mount15[1];
+          _context19.next = 5;
           return wait();
         case 5:
           // simulate async data loading
@@ -545,11 +792,11 @@ describe('Select', function () {
           }, function (_, i) {
             return i;
           }));
-          _context15.next = 8;
+          _context19.next = 8;
           return wait(100);
         case 8:
           element.click();
-          _context15.next = 11;
+          _context19.next = 11;
           return wait();
         case 11:
           wrapper = getElement('.k-virtual-wrapper');
@@ -558,9 +805,9 @@ describe('Select', function () {
           expect(phantom.style.height).to.be.equal('3000px');
         case 15:
         case "end":
-          return _context15.stop();
+          return _context19.stop();
       }
-    }, _callee12);
+    }, _callee14);
   })));
   // it('should trigger change event correctly', async () => {
   // const spy = sinon.spy();

package/components/select/option.d.ts

@@ -3,6 +3,7 @@ export interface OptionProps {
     value: any;
     label?: string;
     disabled?: boolean;
+    isCreated?: boolean;
 }
 export declare class Option extends Component<OptionProps> {
     static template: string | import('intact-react').Template<any>;

package/components/select/option.js

@@ -12,7 +12,8 @@ var typeDefs = {
     required: true
   },
   label: String,
-  disabled: Boolean
+  disabled: Boolean,
+  isCreated: Boolean
 };
 export var Option = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Option, _Component);
@@ -30,12 +31,19 @@ export var Option = /*#__PURE__*/function (_Component) {
   var _proto = Option.prototype;
   _proto.onSelect = function onSelect() {
     var select = this.select;
-    var multiple = select.get('multiple');
+    var _select$get = select.get(),
+      multiple = _select$get.multiple,
+      keepKeywords = _select$get.keepKeywords;
     var value = this.get('value');
+    var isCreated = this.get('isCreated');
     if (!multiple) {
       select.set('value', this.get('value'));
     } else {
       var values = select.get('value');
+      if (!keepKeywords && isCreated && Array.isArray(values) && _includesInstanceProperty(values).call(values, value)) {
+        select.resetKeywords();
+        return;
+      }
       values = toggleArray(values, value);
       select.set('value', values);
     }

package/components/select/select.d.ts

@@ -8,6 +8,7 @@ export interface SelectProps<T = string, Multipe extends boolean = boolean> exte
     labelMap?: Map<any, Children>;
     card?: boolean;
     autoDisableArrow?: boolean;
+    keepKeywords?: boolean;
 }
 export interface SelectEvents extends BaseSelectEvents {
 }

package/components/select/select.js

@@ -18,11 +18,13 @@ var typeDefs = _extends({}, BaseSelect.typeDefs, {
   creatable: Boolean,
   labelMap: _Map,
   card: Boolean,
-  autoDisableArrow: Boolean
+  autoDisableArrow: Boolean,
+  keepKeywords: Boolean
 });
 var defaults = function defaults() {
   return _extends({}, BaseSelect.defaults(), {
-    labelMap: new _Map()
+    labelMap: new _Map(),
+    keepKeywords: true
   });
 };
 export var Select = /*#__PURE__*/function (_BaseSelect) {