Add option to control input reset on selection, close #112

README.md

@@ -88,6 +88,7 @@ controlItem       | Component        | `Item`     | Item component when item is
 dropdownItem      | Component        | `Item`     | Item component in dropdown. See [Custom Items](#custom-items) section for more details.
 selectOnTab       | bool             | `false`    | Allow selecting currently active item by <kbd>Tab</kbd> key
 resetOnBlur       | bool             | `true`     | Control if input value should be cleared on blur
+resetOnSelect     | bool             | `true`     | Control if input value should be cleared on item selection. **Note:** applicable only with `multiple` 
 clearable         | bool             | `false`    | Display ✖ icon to clear whole selection
 multiple          | bool             | `false`    | allow multiselection. Will be set automatically to `true`, if `name` property ends with `[]`, like `tags[]`
 max               | number           | `0`        | Maximum allowed items selected, applicable only for multiselect

component.js

@@ -9,7 +9,7 @@ const OPTION_LIST = [
   // basic
   'value-field', 'label-field', 'disabled-field', 'placeholder',
   // UI, UX
-  'searchable', 'clearable', 'renderer', 'disable-highlight', 'select-on-tab', 'reset-on-blur',
+  'searchable', 'clearable', 'renderer', 'disable-highlight', 'select-on-tab', 'reset-on-blur', 'reset-on-select',
   // multiple
   'multiple', 'max', 'collapse-selection',
   // creating
@@ -51,6 +51,7 @@ function formatValue(name, value) {
     case 'disable-highlight':
     case 'select-on-tab':
     case 'reset-on-blur':
+    case 'reset-on-select':
     case 'multiple':
     case 'collapse-selection':
     case 'creatable':
@@ -237,7 +238,7 @@ class SvelecteElement extends HTMLElement {
         }
       }
     };
-    const boolProps = ['searchable','clearable','disable-highlight', 'required', 'select-on-tab','reset-on-blur',
+    const boolProps = ['searchable','clearable','disable-highlight', 'required', 'select-on-tab','reset-on-blur','reset-on-select',
       'multiple','collapse-selection','creatable','allow-editing','keep-created','fetch-reset-on-blur',
       'virtual-list','disable-sifter','label-as-value', 'disabled'
     ].reduce((res, propName) => {

docs/index.html

@@ -734,6 +734,12 @@ <h4 id="options">Options</h4>
                 <td><code>true</code></td>
                 <td>Control if input value should be cleared on blur</td>
               </tr>
+              <tr>
+                <td>resetOnSelect</td>
+                <td>bool</td>
+                <td><code>true</code></td>
+                <td>Control if input value should be cleared on item selection. <b>Note:</b> Applicable only with <code>multiple</code></td>
+              </tr>
               <tr>
                 <td>clearable</td>
                 <td>bool</td>

docs/src/09-custom-dependent.svelte

@@ -1376,6 +1376,8 @@ return Nette;
   <el-svelecte options={`[{"id":"posts","label":"Posts", "prop": "Posts"},{"id":"users","label":"Users", "prop": "Users"},{"id":"comments","label":"Comments", "prop": "Comment"}]`}
     style="margin-bottom: 0"
     lazy-dropdown="false"
+    multiple
+    reset-on-select="false"
   >
     <select id="anchored" name="demo" multiple on:change={e => console.log(e.target.selectedOptions)}
       data-nette-rules={netteRules}

src/Svelecte.svelte

@@ -47,6 +47,7 @@
   export let disableHighlight = false;
   export let selectOnTab = defaults.selectOnTab;
   export let resetOnBlur = defaults.resetOnBlur;
+  export let resetOnSelect = defaults.resetOnSelect;
   export let dndzone = () => ({ noop: true, destroy: () => {}});
   export let validatorAction = null;
   export let dropdownItem = Item;
@@ -431,7 +432,7 @@
     if (disabled || opt[disabledField] || opt.$isGroupHeader) return;
 
     selectOption(opt);
-    $inputValue = '';
+    if ((multiple && resetOnSelect) || !multiple) $inputValue = '';
     if (!multiple) {
       $hasDropdownOpened = false;
     } else {

src/settings.js

@@ -12,6 +12,7 @@ const settings = {
   clearable: false,
   selectOnTab: false,
   resetOnBlur: true,
+  resetOnSelect: true,
   fetchResetOnBlur: true,
   // multi
   multiple: false,