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

package/components/select/index.spec.js

@@ -317,54 +317,108 @@ 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();
       }
@@ -375,7 +429,6 @@ describe('Select', function () {
     return _regeneratorRuntime.wrap(function _callee9$(_context11) {
       while (1) switch (_context11.prev = _context11.next) {
         case 0:
-          // 创建一个测试组件，包含keepKeywords功能
           KeepKeywordsDemo = /*#__PURE__*/function (_Component2) {
             _inheritsLoose(KeepKeywordsDemo, _Component2);
             function KeepKeywordsDemo() {
@@ -396,9 +449,9 @@ 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            ";
+          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'); // 1. 输入自定义选项 "custom1"
+          input = element.querySelector('.k-input-inner'); // input custom option "custom1"
           input.click();
           _context11.next = 7;
           return wait();
@@ -408,36 +461,36 @@ describe('Select', function () {
           _context11.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;
           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;
           return wait();
         case 22:
-          // 4. 再次按回车
+          // press enter again
           dispatchEvent(document, 'keydown', {
             keyCode: 13
           });
           _context11.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;
@@ -449,10 +502,10 @@ describe('Select', function () {
           _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('');
-          // 6. 测试原有选项的正常行为
+          // test the normal behavior of original options
           input.click();
           _context11.next = 39;
           return wait();
@@ -467,7 +520,7 @@ describe('Select', function () {
           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;
           return wait();
@@ -515,12 +568,12 @@ describe('Select', function () {
     }, _callee10);
   })));
   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;
+    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:
           _mount12 = mount(SearchableDemo), instance = _mount12[0], element = _mount12[1];
-          _element$querySelecto6 = element.querySelectorAll('.k-select'), select = _element$querySelecto6[1];
+          _element$querySelecto7 = element.querySelectorAll('.k-select'), select = _element$querySelecto7[1];
           select.click();
           _context14.next = 5;
           return wait();
@@ -574,21 +627,42 @@ describe('Select', function () {
     }, _callee11);
   })));
   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) {
+    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:
-          _mount13 = mount(SearchableDemo), instance = _mount13[0], element = _mount13[1]; // 验证初始值
+          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']);
-          // 第一次打开dropdown，检查初始状态
-          _element$querySelecto7 = element.querySelectorAll('.k-select'), select = _element$querySelecto7[1];
-          select.click();
-          _context15.next = 6;
+          // first open dropdown, check initial state
+          element.click();
+          _context16.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 +672,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;
+          _context16.next = 21;
           return wait();
-        case 20:
-          // 再次打开dropdown，验证状态仍然正确
-          select.click();
-          _context15.next = 23;
+        case 21:
+          // reopen dropdown, check the state is still correct
+          element.click();
+          _context16.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 +701,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 _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$(_context16) {
-      while (1) switch (_context16.prev = _context16.next) {
+    return _regeneratorRuntime.wrap(function _callee13$(_context17) {
+      while (1) switch (_context17.prev = _context17.next) {
         case 0:
           _mount14 = mount(ImmutableDemo), instance = _mount14[0], element = _mount14[1];
           instance.set('days', ['Tuesday', 'Friday']);
-          _context16.next = 4;
+          _context17.next = 4;
           return wait();
         case 4:
           expect(element.outerHTML).to.matchSnapshot();
           _element$querySelecto8 = element.querySelectorAll('.k-select-clear'), clear1 = _element$querySelecto8[0];
           clear1.click();
-          _context16.next = 9;
+          _context17.next = 9;
           return wait();
         case 9:
           _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']);
-          _context16.next = 15;
+          _context17.next = 15;
           return wait();
         case 15:
           _element$querySelecto10 = element.querySelectorAll('.k-select-clear'), clear2 = _element$querySelecto10[0];
           clear2.click();
-          _context16.next = 19;
+          _context17.next = 19;
           return wait();
         case 19:
           expect(instance.get('days')).to.eql(['Tuesday']);
           instance.set('days', ['Monday', 'Wednesday']);
-          _context16.next = 23;
+          _context17.next = 23;
           return wait();
         case 23:
           _element$querySelecto11 = element.querySelectorAll('.k-select-clear'), clear3 = _element$querySelecto11[0];
           clear3.click();
-          _context16.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 _context16.stop();
+          return _context17.stop();
       }
     }, _callee13);
   })));
   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) {
+    return _regeneratorRuntime.wrap(function _callee14$(_context19) {
+      while (1) switch (_context19.prev = _context19.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 _context18;
+              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(_context18 = [this]).call(_context18, args)) || this;
+              _this5.Select = Select;
+              _this5.Option = Option;
+              return _this5;
             }
             Demo.defaults = function defaults() {
               return {
@@ -709,7 +783,7 @@ describe('Select', function () {
           }(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;
+          _context19.next = 5;
           return wait();
         case 5:
           // simulate async data loading
@@ -718,11 +792,11 @@ describe('Select', function () {
           }, function (_, i) {
             return i;
           }));
-          _context18.next = 8;
+          _context19.next = 8;
           return wait(100);
         case 8:
           element.click();
-          _context18.next = 11;
+          _context19.next = 11;
           return wait();
         case 11:
           wrapper = getElement('.k-virtual-wrapper');
@@ -731,7 +805,7 @@ describe('Select', function () {
           expect(phantom.style.height).to.be.equal('3000px');
         case 15:
         case "end":
-          return _context18.stop();
+          return _context19.stop();
       }
     }, _callee14);
   })));

package/components/select/option.js

@@ -40,7 +40,8 @@ export var Option = /*#__PURE__*/function (_Component) {
       select.set('value', this.get('value'));
     } else {
       var values = select.get('value');
-      if (keepKeywords && isCreated && Array.isArray(values) && _includesInstanceProperty(values).call(values, value)) {
+      if (!keepKeywords && isCreated && Array.isArray(values) && _includesInstanceProperty(values).call(values, value)) {
+        select.resetKeywords();
         return;
       }
       values = toggleArray(values, value);

package/components/select/select.js

@@ -23,7 +23,8 @@ var typeDefs = _extends({}, BaseSelect.typeDefs, {
 });
 var defaults = function defaults() {
   return _extends({}, BaseSelect.defaults(), {
-    labelMap: new _Map()
+    labelMap: new _Map(),
+    keepKeywords: true
   });
 };
 export var Select = /*#__PURE__*/function (_BaseSelect) {

package/components/select/styles.d.ts

@@ -1,4 +1,83 @@
+import { Sizes } from '../../styles/utils';
 import '../../styles/global';
+type SizeStyles = {
+    padding: string;
+    height: string;
+    fontSize: string;
+};
+declare const defaults: {
+    readonly transition: string;
+    width: string;
+    readonly height: string;
+    bgColor: string;
+    readonly fontSize: string;
+    readonly border: string;
+    readonly focusBorder: string;
+    readonly hoverBorder: string;
+    readonly activeColor: string;
+    readonly borderRadius: string;
+    suffixGap: string;
+    clearGap: string;
+    readonly placeholderColor: string;
+    disabled: {
+        readonly color: string;
+        readonly bgColor: string;
+        readonly borderColor: string;
+    };
+    group: {
+        readonly labelColor: string;
+        labelPadding: string;
+    };
+    card: {
+        height: string;
+        readonly itemHoverColor: string;
+        itemHoverBgColor: string;
+    };
+    multiple: {
+        checkmark: {
+            fontSize: string;
+        };
+    };
+    tag: {
+        margin: string;
+        padding: string;
+        readonly borderRadius: string;
+        readonly bgColor: string;
+        disabledBgColor: string;
+        delete: {
+            gap: string;
+            fontSize: string;
+            readonly color: string;
+        };
+    };
+    menuMaxHeight: string;
+    empty: {
+        padding: string;
+        readonly color: string;
+    };
+    searchable: {
+        padding: string;
+        headerGap: string;
+        readonly border: string;
+        header: {
+            padding: string;
+            gap: string;
+            btnPadding: string;
+            btnGap: string;
+        };
+        optionPadding: string;
+        footer: {
+            padding: string;
+            gap: string;
+            btnGap: string;
+        };
+    };
+    flat: {
+        readonly color: string;
+    };
+} & Record<Sizes, SizeStyles>;
+declare let select: typeof defaults;
+export { select };
 export declare const makeStyles: {
     (k: string): string;
     clearCache(): {};

package/components/select/styles.js

@@ -146,6 +146,7 @@ setDefault(function () {
   makeMenuStyles == null || makeMenuStyles.clearCache();
   makeGroupStyles == null || makeGroupStyles.clearCache();
 });
+export { select };
 export var makeStyles = cache(function makeStyles(k) {
   return /*#__PURE__*/css("display:inline-flex;align-items:center;vertical-align:middle;position:relative;width:", select.width, ";cursor:pointer;outline:none;border:", select.border, ";background:", select.bgColor, ";transition:border ", select.transition, ",background ", select.transition, ",box-shadow ", select.transition, ";border-radius:", select.borderRadius, ";.", k, "-select-main{flex:1;min-width:0;}.", k, "-select-prefix,.", k, "-select-suffix{display:flex;align-items:center;position:relative;}.", k, "-select-suffix{margin-left:", select.suffixGap, ";}.", k, "-select-placeholder{color:", select.placeholderColor, ";user-select:none;}.", k, "-input .", k, "-input-inner{background:transparent;}&.", k, "-fluid{width:100%;}.", k, "-select-clear{opacity:0;transition:opacity ", select.transition, ",color ", select.transition, "!important;pointer-events:none;position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%, -50%);}&:hover{border:", select.hoverBorder, ";.", k, "-select-clear.", k, "-show{opacity:1;pointer-events:all;+.", k, "-select-suffix-icon{opacity:0;}}}.", k, "-select-suffix-icon{display:inline-flex;align-items:center;transition:opacity ", select.transition, ";}.", k, "-select-arrow{display:inline-block;transition:transform ", select.transition, ";}&.", k, "-dropdown-open{border:", select.focusBorder, ";.", k, "-select-arrow{transform:rotateX(180deg);}}&:focus{outline:none;border:", select.focusBorder, ";}.", k, "-tags{padding:3px 0;}.", k, "-tag{word-break:break-word;height:auto;max-width:calc(100% - ", getRight(select.tag.margin), " - 1px);}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = select[size];

package/components/select/useInput.d.ts

@@ -1,6 +1,6 @@
 import { State } from '../../hooks/useState';
 import type { Input } from '../input';
-export declare function useInput(resetKeywords: (keywords: State<string>) => void): {
+export declare function useInput(resetKeywords: () => void): {
     onInput: (value: string) => void;
     keywords: State<string>;
     inputRef: import('intact-vue-next').RefObject<Input<string | number>>;

package/components/select/useInput.js

@@ -29,9 +29,9 @@ export function useInput(resetKeywords) {
   component.on('$changed:show', function (show) {
     if (show) {
       focusInput();
-      resetKeywords(keywords);
+      resetKeywords();
     } else if (component.get('multiple')) {
-      resetKeywords(keywords);
+      resetKeywords();
     }
   });
   component.on('$changed:value', function () {
@@ -45,8 +45,8 @@ export function useInput(resetKeywords) {
        * don't reset keywords on multiple mode for continue selection
        * https://github.com/ksc-fe/kpc/issues/983
        */
-      if (keepKeywords) {
-        resetKeywords(keywords);
+      if (!keepKeywords) {
+        resetKeywords();
       }
     }
   });