selectic 3.0.2 → 3.0.6

package/dist/selectic.common.js

@@ -101,12 +101,33 @@ let closePreviousSelectic;
 let uid = 0;
 class SelecticStore {
     constructor(props = {}) {
+        /* Do not need reactivity */
+        this.requestId = 0;
+        this._uid = ++uid;
+        /* {{{ Props */
+        const defaultProps = {
+            value: null,
+            selectionIsExcluded: false,
+            disabled: false,
+            options: null,
+            childOptions: [],
+            groups: [],
+            texts: null,
+            params: {},
+            fetchCallback: null,
+            getItemsCallback: null,
+            keepOpenWithOtherSelectic: false,
+        };
+        const propsVal = assignObject(defaultProps, props);
+        this.props = vue.reactive(propsVal);
+        /* }}} */
         /* {{{ data */
         this.state = vue.reactive({
             multiple: false,
             disabled: false,
             placeholder: '',
             hideFilter: false,
+            keepFilterOpen: false,
             allowRevert: undefined,
             allowClearSelection: false,
             autoSelect: true,
@@ -140,27 +161,6 @@ class SelecticStore {
                 automaticClose: false,
             },
         });
-        /* Do not need reactivity */
-        this.requestId = 0;
-        this._uid = ++uid;
-        /* {{{ Props */
-        const defaultProps = {
-            value: null,
-            selectionIsExcluded: false,
-            disabled: false,
-            options: null,
-            childOptions: [],
-            groups: [],
-            texts: null,
-            params: {},
-            fetchCallback: null,
-            getItemsCallback: null,
-            keepOpenWithOtherSelectic: false,
-        };
-        const propsVal = assignObject(defaultProps, props);
-        this.props = vue.reactive(propsVal);
-        /* }}} */
-        /* {{{ data */
         this.data = vue.reactive({
             labels: Object.assign({}, messages),
             itemsPerPage: 10,
@@ -264,14 +264,18 @@ class SelecticStore {
         if (stateParam.hideFilter === 'auto') {
             delete stateParam.hideFilter;
         }
+        else if (stateParam.hideFilter === 'open') {
+            this.state.keepFilterOpen = true;
+            delete stateParam.hideFilter;
+        }
         /* Update state */
         assignObject(this.state, stateParam);
         /* XXX: should be done in 2 lines, in order to set the multiple state
          * and ensure convertValue run with correct state */
         assignObject(this.state, {
             internalValue: this.convertTypeValue(value),
-            selectionIsExcluded: props.selectionIsExcluded,
-            disabled: props.disabled,
+            selectionIsExcluded: !!props.selectionIsExcluded,
+            disabled: !!props.disabled, /* XXX: !! is needed to copy value and not proxy reference */
         });
         this.checkHideFilter();
         if (this.props.texts) {
@@ -1468,6 +1472,10 @@ let FilterPanel = class FilterPanel extends vtyx.Vue {
         this.store.commit('selectionIsExcluded', !this.selectionIsExcluded);
     }
     togglePanel() {
+        if (this.store.state.keepFilterOpen === true) {
+            this.closed = false;
+            return;
+        }
         this.closed = !this.closed;
     }
     getFocus() {
@@ -1484,7 +1492,8 @@ let FilterPanel = class FilterPanel extends vtyx.Vue {
     /* }}} */
     /* {{{ Life cycle */
     mounted() {
-        this.closed = !this.store.state.searchText;
+        const state = this.store.state;
+        this.closed = !state.keepFilterOpen && !state.searchText;
         document.addEventListener('keypress', this.onKeyPressed);
         this.getFocus();
     }
@@ -1493,24 +1502,27 @@ let FilterPanel = class FilterPanel extends vtyx.Vue {
     }
     /* }}} */
     render() {
+        const store = this.store;
+        const state = store.state;
+        const labels = store.data.labels;
         return (vtyx.h("div", { class: "filter-panel" },
             vtyx.h("div", { class: {
                     panelclosed: this.closed,
                     panelopened: !this.closed,
                 } },
                 vtyx.h("div", { class: "filter-panel__input form-group has-feedback" },
-                    vtyx.h("input", { type: "text", class: "form-control filter-input", placeholder: this.searchPlaceholder, value: this.store.state.searchText, on: {
+                    vtyx.h("input", { type: "text", class: "form-control filter-input", placeholder: this.searchPlaceholder, value: state.searchText, on: {
                             'input.stop.prevent': this.onInput,
                         }, ref: "filterInput" }),
                     vtyx.h("span", { class: "fa fa-search selectic-search-scope\n                                     form-control-feedback" })),
-                this.store.state.multiple && (vtyx.h("div", { class: "toggle-selectic" },
+                state.multiple && (vtyx.h("div", { class: "toggle-selectic" },
                     vtyx.h("label", { class: ['control-label', {
                                 'selectic__label-disabled': this.disableSelectAll,
                             }] },
-                        vtyx.h("input", { type: "checkbox", checked: this.store.state.status.areAllSelected, disabled: this.disableSelectAll, on: {
+                        vtyx.h("input", { type: "checkbox", checked: state.status.areAllSelected, disabled: this.disableSelectAll, on: {
                                 change: this.onSelectAll,
                             } }),
-                        this.store.data.labels.selectAll))),
+                        labels.selectAll))),
                 this.enableRevert && (vtyx.h("div", { class: ['toggle-selectic', {
                             'selectic__label-disabled': this.disableRevert,
                         }] },
@@ -1518,8 +1530,8 @@ let FilterPanel = class FilterPanel extends vtyx.Vue {
                         vtyx.h("input", { type: "checkbox", checked: this.selectionIsExcluded, disabled: this.disableRevert, on: {
                                 change: this.onExclude,
                             } }),
-                        this.store.data.labels.excludeResult)))),
-            vtyx.h("div", { class: "curtain-handler", on: {
+                        labels.excludeResult)))),
+            !state.keepFilterOpen && (vtyx.h("div", { class: "curtain-handler", on: {
                     'click.prevent.stop': this.togglePanel,
                 } },
                 vtyx.h("span", { class: "fa fa-search" }),
@@ -1527,7 +1539,7 @@ let FilterPanel = class FilterPanel extends vtyx.Vue {
                         'fa': true,
                         'fa-caret-down': this.closed,
                         'fa-caret-up': !this.closed,
-                    } }))));
+                    } })))));
     }
 };
 __decorate$3([
@@ -2012,15 +2024,26 @@ let Selectic = class Selectic extends vtyx.Vue {
     }
     get outsideListener() {
         return (evt) => {
-            const target = evt.target;
             if (!this.$refs) {
                 /* this component should have been destroyed */
                 this.removeListeners();
                 this.store.commit('isOpen', false);
                 return;
             }
-            if (!this.$refs.extendedList.$el.contains(target) && !this.$el.contains(target)) {
-                this.store.commit('isOpen', false);
+            const store = this.store;
+            const keepOpenWithOtherSelectic = this.params.keepOpenWithOtherSelectic;
+            const extendedList = this.$refs.extendedList;
+            if (!extendedList) {
+                /* this component is not focused anymore */
+                if (!keepOpenWithOtherSelectic) {
+                    this.removeListeners();
+                    this.store.commit('isOpen', false);
+                }
+                return;
+            }
+            const target = evt.target;
+            if (!extendedList.$el.contains(target) && !this.$el.contains(target)) {
+                store.commit('isOpen', false);
             }
         };
     }
@@ -2370,7 +2393,7 @@ let Selectic = class Selectic extends vtyx.Vue {
     /* }}} */
     /* {{{ Life cycle */
     created() {
-        var _a, _b;
+        var _a, _b, _c;
         this._elementsListeners = [];
         this.store = new SelecticStore({
             options: this.options,
@@ -2383,8 +2406,7 @@ let Selectic = class Selectic extends vtyx.Vue {
             params: {
                 multiple: ((_a = this.multiple) !== null && _a !== void 0 ? _a : false) !== false,
                 pageSize: this.params.pageSize || 100,
-                hideFilter: this.params.hideFilter !== undefined
-                    ? this.params.hideFilter : 'auto',
+                hideFilter: (_b = this.params.hideFilter) !== null && _b !== void 0 ? _b : 'auto',
                 allowRevert: this.params.allowRevert,
                 allowClearSelection: this.params.allowClearSelection || false,
                 autoSelect: this.params.autoSelect === undefined
@@ -2399,7 +2421,7 @@ let Selectic = class Selectic extends vtyx.Vue {
                 formatSelection: this.params.formatSelection,
                 listPosition: this.params.listPosition || 'auto',
                 optionBehavior: this.params.optionBehavior,
-                isOpen: ((_b = this.open) !== null && _b !== void 0 ? _b : false) !== false,
+                isOpen: ((_c = this.open) !== null && _c !== void 0 ? _c : false) !== false,
             },
             fetchCallback: this.params.fetchCallback,
             getItemsCallback: this.params.getItemsCallback,
@@ -2545,10 +2567,19 @@ __decorate([
 __decorate([
     vtyx.Watch('store.state.internalValue')
 ], Selectic.prototype, "onInternalValueChange", null);
+__decorate([
+    vtyx.Emit('input'),
+    vtyx.Emit('change'),
+    vtyx.Emit('open'),
+    vtyx.Emit('focus'),
+    vtyx.Emit('close'),
+    vtyx.Emit('blur'),
+    vtyx.Emit('item:click')
+], Selectic.prototype, "render", null);
 Selectic = __decorate([
     vtyx.Component
 ], Selectic);
 var Selectic$1 = Selectic;
 
 exports.changeTexts = changeTexts;
-exports['default'] = Selectic$1;
+exports["default"] = Selectic$1;

package/dist/selectic.esm.js

@@ -1,4 +1,4 @@
-import { Prop, Watch, Component, Vue, h } from 'vtyx';
+import { Prop, Watch, Component, Vue, h, Emit } from 'vtyx';
 import { reactive, computed, unref, watch } from 'vue';
 
 function styleInject(css, ref) {
@@ -97,12 +97,33 @@ let closePreviousSelectic;
 let uid = 0;
 class SelecticStore {
     constructor(props = {}) {
+        /* Do not need reactivity */
+        this.requestId = 0;
+        this._uid = ++uid;
+        /* {{{ Props */
+        const defaultProps = {
+            value: null,
+            selectionIsExcluded: false,
+            disabled: false,
+            options: null,
+            childOptions: [],
+            groups: [],
+            texts: null,
+            params: {},
+            fetchCallback: null,
+            getItemsCallback: null,
+            keepOpenWithOtherSelectic: false,
+        };
+        const propsVal = assignObject(defaultProps, props);
+        this.props = reactive(propsVal);
+        /* }}} */
         /* {{{ data */
         this.state = reactive({
             multiple: false,
             disabled: false,
             placeholder: '',
             hideFilter: false,
+            keepFilterOpen: false,
             allowRevert: undefined,
             allowClearSelection: false,
             autoSelect: true,
@@ -136,27 +157,6 @@ class SelecticStore {
                 automaticClose: false,
             },
         });
-        /* Do not need reactivity */
-        this.requestId = 0;
-        this._uid = ++uid;
-        /* {{{ Props */
-        const defaultProps = {
-            value: null,
-            selectionIsExcluded: false,
-            disabled: false,
-            options: null,
-            childOptions: [],
-            groups: [],
-            texts: null,
-            params: {},
-            fetchCallback: null,
-            getItemsCallback: null,
-            keepOpenWithOtherSelectic: false,
-        };
-        const propsVal = assignObject(defaultProps, props);
-        this.props = reactive(propsVal);
-        /* }}} */
-        /* {{{ data */
         this.data = reactive({
             labels: Object.assign({}, messages),
             itemsPerPage: 10,
@@ -260,14 +260,18 @@ class SelecticStore {
         if (stateParam.hideFilter === 'auto') {
             delete stateParam.hideFilter;
         }
+        else if (stateParam.hideFilter === 'open') {
+            this.state.keepFilterOpen = true;
+            delete stateParam.hideFilter;
+        }
         /* Update state */
         assignObject(this.state, stateParam);
         /* XXX: should be done in 2 lines, in order to set the multiple state
          * and ensure convertValue run with correct state */
         assignObject(this.state, {
             internalValue: this.convertTypeValue(value),
-            selectionIsExcluded: props.selectionIsExcluded,
-            disabled: props.disabled,
+            selectionIsExcluded: !!props.selectionIsExcluded,
+            disabled: !!props.disabled, /* XXX: !! is needed to copy value and not proxy reference */
         });
         this.checkHideFilter();
         if (this.props.texts) {
@@ -1464,6 +1468,10 @@ let FilterPanel = class FilterPanel extends Vue {
         this.store.commit('selectionIsExcluded', !this.selectionIsExcluded);
     }
     togglePanel() {
+        if (this.store.state.keepFilterOpen === true) {
+            this.closed = false;
+            return;
+        }
         this.closed = !this.closed;
     }
     getFocus() {
@@ -1480,7 +1488,8 @@ let FilterPanel = class FilterPanel extends Vue {
     /* }}} */
     /* {{{ Life cycle */
     mounted() {
-        this.closed = !this.store.state.searchText;
+        const state = this.store.state;
+        this.closed = !state.keepFilterOpen && !state.searchText;
         document.addEventListener('keypress', this.onKeyPressed);
         this.getFocus();
     }
@@ -1489,24 +1498,27 @@ let FilterPanel = class FilterPanel extends Vue {
     }
     /* }}} */
     render() {
+        const store = this.store;
+        const state = store.state;
+        const labels = store.data.labels;
         return (h("div", { class: "filter-panel" },
             h("div", { class: {
                     panelclosed: this.closed,
                     panelopened: !this.closed,
                 } },
                 h("div", { class: "filter-panel__input form-group has-feedback" },
-                    h("input", { type: "text", class: "form-control filter-input", placeholder: this.searchPlaceholder, value: this.store.state.searchText, on: {
+                    h("input", { type: "text", class: "form-control filter-input", placeholder: this.searchPlaceholder, value: state.searchText, on: {
                             'input.stop.prevent': this.onInput,
                         }, ref: "filterInput" }),
                     h("span", { class: "fa fa-search selectic-search-scope\n                                     form-control-feedback" })),
-                this.store.state.multiple && (h("div", { class: "toggle-selectic" },
+                state.multiple && (h("div", { class: "toggle-selectic" },
                     h("label", { class: ['control-label', {
                                 'selectic__label-disabled': this.disableSelectAll,
                             }] },
-                        h("input", { type: "checkbox", checked: this.store.state.status.areAllSelected, disabled: this.disableSelectAll, on: {
+                        h("input", { type: "checkbox", checked: state.status.areAllSelected, disabled: this.disableSelectAll, on: {
                                 change: this.onSelectAll,
                             } }),
-                        this.store.data.labels.selectAll))),
+                        labels.selectAll))),
                 this.enableRevert && (h("div", { class: ['toggle-selectic', {
                             'selectic__label-disabled': this.disableRevert,
                         }] },
@@ -1514,8 +1526,8 @@ let FilterPanel = class FilterPanel extends Vue {
                         h("input", { type: "checkbox", checked: this.selectionIsExcluded, disabled: this.disableRevert, on: {
                                 change: this.onExclude,
                             } }),
-                        this.store.data.labels.excludeResult)))),
-            h("div", { class: "curtain-handler", on: {
+                        labels.excludeResult)))),
+            !state.keepFilterOpen && (h("div", { class: "curtain-handler", on: {
                     'click.prevent.stop': this.togglePanel,
                 } },
                 h("span", { class: "fa fa-search" }),
@@ -1523,7 +1535,7 @@ let FilterPanel = class FilterPanel extends Vue {
                         'fa': true,
                         'fa-caret-down': this.closed,
                         'fa-caret-up': !this.closed,
-                    } }))));
+                    } })))));
     }
 };
 __decorate$3([
@@ -2008,15 +2020,26 @@ let Selectic = class Selectic extends Vue {
     }
     get outsideListener() {
         return (evt) => {
-            const target = evt.target;
             if (!this.$refs) {
                 /* this component should have been destroyed */
                 this.removeListeners();
                 this.store.commit('isOpen', false);
                 return;
             }
-            if (!this.$refs.extendedList.$el.contains(target) && !this.$el.contains(target)) {
-                this.store.commit('isOpen', false);
+            const store = this.store;
+            const keepOpenWithOtherSelectic = this.params.keepOpenWithOtherSelectic;
+            const extendedList = this.$refs.extendedList;
+            if (!extendedList) {
+                /* this component is not focused anymore */
+                if (!keepOpenWithOtherSelectic) {
+                    this.removeListeners();
+                    this.store.commit('isOpen', false);
+                }
+                return;
+            }
+            const target = evt.target;
+            if (!extendedList.$el.contains(target) && !this.$el.contains(target)) {
+                store.commit('isOpen', false);
             }
         };
     }
@@ -2366,7 +2389,7 @@ let Selectic = class Selectic extends Vue {
     /* }}} */
     /* {{{ Life cycle */
     created() {
-        var _a, _b;
+        var _a, _b, _c;
         this._elementsListeners = [];
         this.store = new SelecticStore({
             options: this.options,
@@ -2379,8 +2402,7 @@ let Selectic = class Selectic extends Vue {
             params: {
                 multiple: ((_a = this.multiple) !== null && _a !== void 0 ? _a : false) !== false,
                 pageSize: this.params.pageSize || 100,
-                hideFilter: this.params.hideFilter !== undefined
-                    ? this.params.hideFilter : 'auto',
+                hideFilter: (_b = this.params.hideFilter) !== null && _b !== void 0 ? _b : 'auto',
                 allowRevert: this.params.allowRevert,
                 allowClearSelection: this.params.allowClearSelection || false,
                 autoSelect: this.params.autoSelect === undefined
@@ -2395,7 +2417,7 @@ let Selectic = class Selectic extends Vue {
                 formatSelection: this.params.formatSelection,
                 listPosition: this.params.listPosition || 'auto',
                 optionBehavior: this.params.optionBehavior,
-                isOpen: ((_b = this.open) !== null && _b !== void 0 ? _b : false) !== false,
+                isOpen: ((_c = this.open) !== null && _c !== void 0 ? _c : false) !== false,
             },
             fetchCallback: this.params.fetchCallback,
             getItemsCallback: this.params.getItemsCallback,
@@ -2541,6 +2563,15 @@ __decorate([
 __decorate([
     Watch('store.state.internalValue')
 ], Selectic.prototype, "onInternalValueChange", null);
+__decorate([
+    Emit('input'),
+    Emit('change'),
+    Emit('open'),
+    Emit('focus'),
+    Emit('close'),
+    Emit('blur'),
+    Emit('item:click')
+], Selectic.prototype, "render", null);
 Selectic = __decorate([
     Component
 ], Selectic);

package/doc/params.md

@@ -10,13 +10,16 @@ This property is an object with several attributes which are listed below.
 
 ## hideFilter
 
-Type: `boolean` | `'auto'`
+Type: `boolean` | `'auto'` | `'open'`
 
 If `hideFilter` is set to `true`, the handler to open the filter panel is hidden and it will not be possible to search for options.
 
 If `hideFilter` is set to `'auto`, the handler to open the filter panel is hidden only if there is less than 10 options (when there is no scroll), and is displayed otherwise. _This is the default value_.
 
-If `hideFilter` is set to `true`, the handler to open the filter panel is always displayed.
+If `hideFilter` is set to `false`, the handler to open the filter panel is always displayed.
+
+If `hideFilter` is set to `'open'`, the handler to open or close the filter panel
+will not be displayed and the filter panel is always open.
 
 ```html
 <selectic

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "selectic",
-    "version": "3.0.2",
+    "version": "3.0.6",
     "description": "Smart Select for VueJS 3.x",
     "main": "dist/selectic.common.js",
     "module": "dist/selectic.esm.js",
@@ -36,12 +36,13 @@
         "test": "npm run build && tape test/**/*.spec.js"
     },
     "dependencies": {
-        "vtyx": "4.0.0"
+        "vtyx": "4.0.3"
     },
     "devDependencies": {
-        "rollup": "^2.56.3",
+        "@babel/types": "^7.16.7",
+        "rollup": "^2.63.0",
         "rollup-plugin-postcss": "^3.1.8",
-        "tape": "^4.13.3",
-        "typescript": "~4.4"
+        "tape": "^4.14.0",
+        "typescript": "~4.5"
     }
 }

package/src/Filter.tsx

@@ -100,6 +100,10 @@ export default class FilterPanel extends Vue<Props> {
     }
 
     private togglePanel() {
+        if (this.store.state.keepFilterOpen === true) {
+            this.closed = false;
+            return;
+        }
         this.closed = !this.closed;
     }
 
@@ -122,7 +126,8 @@ export default class FilterPanel extends Vue<Props> {
     /* {{{ Life cycle */
 
     public mounted() {
-        this.closed = !this.store.state.searchText;
+        const state = this.store.state;
+        this.closed = !state.keepFilterOpen && !state.searchText;
         document.addEventListener('keypress', this.onKeyPressed);
 
         this.getFocus();
@@ -135,6 +140,10 @@ export default class FilterPanel extends Vue<Props> {
     /* }}} */
 
     public render() {
+        const store = this.store;
+        const state = store.state;
+        const labels = store.data.labels;
+
         return (
             <div class="filter-panel">
                 <div
@@ -148,7 +157,7 @@ export default class FilterPanel extends Vue<Props> {
                             type="text"
                             class="form-control filter-input"
                             placeholder={this.searchPlaceholder}
-                            value={this.store.state.searchText}
+                            value={state.searchText}
                             on={{
                                 'input.stop.prevent': this.onInput,
                             }}
@@ -158,7 +167,7 @@ export default class FilterPanel extends Vue<Props> {
                                      form-control-feedback"
                         ></span>
                     </div>
-                    {this.store.state.multiple && (
+                    {state.multiple && (
                         <div class="toggle-selectic">
                             <label
                                 class={['control-label', {
@@ -167,13 +176,13 @@ export default class FilterPanel extends Vue<Props> {
                             >
                                 <input
                                     type="checkbox"
-                                    checked={this.store.state.status.areAllSelected}
+                                    checked={state.status.areAllSelected}
                                     disabled={this.disableSelectAll}
                                     on={{
                                         change: this.onSelectAll,
                                     }}
                                 />
-                                {this.store.data.labels.selectAll}
+                                {labels.selectAll}
                             </label>
                         </div>
                     )}
@@ -192,11 +201,13 @@ export default class FilterPanel extends Vue<Props> {
                                         change: this.onExclude,
                                     }}
                                 />
-                                {this.store.data.labels.excludeResult}
+                                {labels.excludeResult}
                             </label>
                         </div>
                     )}
                 </div>
+
+                {!state.keepFilterOpen && (
                 <div class="curtain-handler"
                      on={{
                          'click.prevent.stop': this.togglePanel,
@@ -209,6 +220,7 @@ export default class FilterPanel extends Vue<Props> {
                         'fa-caret-up': !this.closed,
                     }}></span>
                 </div>
+                )}
            </div>
         );
     }

package/src/Store.tsx

@@ -72,6 +72,15 @@ export type ListPosition =
     /* Display the list at bottom but if there is not enough space, display it at top */
   | 'auto';
 
+export type HideFilter =
+    /* Display or hide the filter panel */
+    boolean
+    /* The handler to open the filter panel is hidden only if there is less
+     * than 10 options */
+  | 'auto'
+    /* The panel filter is always open */
+  | 'open';
+
 export interface SelecticStoreStateParams {
     /* Equivalent of <select>'s "multiple" attribute */
     multiple?: boolean;
@@ -80,7 +89,7 @@ export interface SelecticStoreStateParams {
     placeholder?: string;
 
     /* Hide filter component when enabled */
-    hideFilter?: boolean | 'auto';
+    hideFilter?: HideFilter;
 
     /* Allow to reverse selection.
      * If true, parent should support the selectionIsExcluded property.
@@ -203,6 +212,9 @@ export interface SelecticStoreState {
     /* If true, filters and controls are hidden */
     hideFilter: boolean;
 
+    /* If true, the filter panel is always open */
+    keepFilterOpen: boolean;
+
     /* Allow to reverse selection.
      * If true, parent should support the selectionIsExcluded property.
      * If false, the action is never available.
@@ -399,47 +411,7 @@ export default class SelecticStore {
 
     /* {{{ data */
 
-    public state = reactive<SelecticStoreState>({
-        multiple: false,
-        disabled: false,
-        placeholder: '',
-        hideFilter: false,
-        allowRevert: undefined,
-        allowClearSelection: false,
-        autoSelect: true,
-        autoDisabled: true,
-        strictValue: false,
-        selectionOverflow: 'collapsed',
-
-        internalValue: null,
-        isOpen: false,
-        searchText: '',
-        selectionIsExcluded: false,
-        allOptions: [],
-        dynOptions: [],
-        filteredOptions: [],
-        selectedOptions: null,
-        totalAllOptions: Infinity,
-        totalDynOptions: Infinity,
-        totalFilteredOptions: Infinity,
-        groups: new Map(),
-        offsetItem: 0,
-        activeItemIdx: -1,
-        pageSize: 100,
-        listPosition: 'auto',
-
-        optionBehaviorOperation: 'sort',
-        optionBehaviorOrder: ['O', 'D', 'E'],
-
-        status: {
-            searching: false,
-            errorMessage: '',
-            areAllSelected: false,
-            hasChanged: false,
-            automaticChange: false,
-            automaticClose: false,
-        },
-    });
+    public state: SelecticStoreState;
     public data: Data;
 
     /* Do not need reactivity */
@@ -487,6 +459,49 @@ export default class SelecticStore {
         /* }}} */
         /* {{{ data */
 
+        this.state = reactive<SelecticStoreState>({
+            multiple: false,
+            disabled: false,
+            placeholder: '',
+            hideFilter: false,
+            keepFilterOpen: false,
+            allowRevert: undefined,
+            allowClearSelection: false,
+            autoSelect: true,
+            autoDisabled: true,
+            strictValue: false,
+            selectionOverflow: 'collapsed',
+
+            internalValue: null,
+            isOpen: false,
+            searchText: '',
+            selectionIsExcluded: false,
+            allOptions: [],
+            dynOptions: [],
+            filteredOptions: [],
+            selectedOptions: null,
+            totalAllOptions: Infinity,
+            totalDynOptions: Infinity,
+            totalFilteredOptions: Infinity,
+            groups: new Map(),
+            offsetItem: 0,
+            activeItemIdx: -1,
+            pageSize: 100,
+            listPosition: 'auto',
+
+            optionBehaviorOperation: 'sort',
+            optionBehaviorOrder: ['O', 'D', 'E'],
+
+            status: {
+                searching: false,
+                errorMessage: '',
+                areAllSelected: false,
+                hasChanged: false,
+                automaticChange: false,
+                automaticClose: false,
+            },
+        });
+
         this.data = reactive({
             labels: Object.assign({}, messages),
             itemsPerPage: 10,
@@ -625,6 +640,9 @@ export default class SelecticStore {
 
         if (stateParam.hideFilter === 'auto') {
             delete stateParam.hideFilter;
+        } else if (stateParam.hideFilter === 'open') {
+            this.state.keepFilterOpen = true;
+            delete stateParam.hideFilter;
         }
 
         /* Update state */
@@ -633,8 +651,8 @@ export default class SelecticStore {
          * and ensure convertValue run with correct state */
         assignObject(this.state, {
             internalValue: this.convertTypeValue(value),
-            selectionIsExcluded: props.selectionIsExcluded,
-            disabled: props.disabled,
+            selectionIsExcluded: !!props.selectionIsExcluded,
+            disabled: !!props.disabled, /* XXX: !! is needed to copy value and not proxy reference */
         });
 
         this.checkHideFilter();

package/src/index.tsx

@@ -18,7 +18,7 @@
  *   close [component]: triggered when the list closes.
  */
 
-import {Vue, Component, Prop, Watch, h} from 'vtyx';
+import {Vue, Component, Emit, Prop, Watch, h} from 'vtyx';
 import './css/selectic.css';
 
 import Store, {
@@ -36,6 +36,7 @@ import Store, {
     FormatCallback,
     SelectionOverflow,
     ListPosition,
+    HideFilter,
 } from './Store';
 import MainInput from './MainInput';
 import ExtendedList from './ExtendedList';
@@ -55,6 +56,7 @@ export {
     FormatCallback,
     SelectionOverflow,
     ListPosition,
+    HideFilter,
 };
 
 type EventType = 'input' | 'change' | 'open' | 'close' | 'focus' | 'blur' | 'item:click';
@@ -83,7 +85,7 @@ export interface ParamProps {
     pageSize?: number;
 
     /* Hide the search control */
-    hideFilter?: boolean | 'auto';
+    hideFilter?: HideFilter;
 
     /* Allow to reverse selection.
      * If true, parent should support the selectionIsExcluded property.
@@ -307,8 +309,6 @@ export default class Selectic extends Vue<Props> {
 
     get outsideListener() {
         return (evt: MouseEvent) => {
-            const target =  evt.target as Node;
-
             if (!this.$refs) {
                 /* this component should have been destroyed */
                 this.removeListeners();
@@ -316,8 +316,23 @@ export default class Selectic extends Vue<Props> {
                 return;
             }
 
-            if (!this.$refs.extendedList.$el.contains(target) && !this.$el.contains(target)) {
-                this.store.commit('isOpen', false);
+            const store = this.store;
+            const keepOpenWithOtherSelectic = this.params.keepOpenWithOtherSelectic;
+            const extendedList = this.$refs.extendedList;
+
+            if (!extendedList) {
+                /* this component is not focused anymore */
+                if (!keepOpenWithOtherSelectic) {
+                    this.removeListeners();
+                    this.store.commit('isOpen', false);
+                }
+                return;
+            }
+
+            const target =  evt.target as Node;
+
+            if (!extendedList.$el.contains(target) && !this.$el.contains(target)) {
+                store.commit('isOpen', false);
             }
         };
     }
@@ -774,8 +789,7 @@ export default class Selectic extends Vue<Props> {
             params: {
                 multiple: (this.multiple ?? false) !== false,
                 pageSize: this.params.pageSize || 100,
-                hideFilter: this.params.hideFilter !== undefined
-                          ? this.params.hideFilter : 'auto',
+                hideFilter: this.params.hideFilter ?? 'auto',
                 allowRevert: this.params.allowRevert, /* it can be undefined */
                 allowClearSelection: this.params.allowClearSelection || false,
                 autoSelect: this.params.autoSelect === undefined
@@ -843,6 +857,13 @@ export default class Selectic extends Vue<Props> {
 
     /* }}} */
 
+    @Emit('input')
+    @Emit('change')
+    @Emit('open')
+    @Emit('focus')
+    @Emit('close')
+    @Emit('blur')
+    @Emit('item:click')
     public render() {
         const id = this.id || undefined;
         const store = this.store;

package/test/Store/Store_creation.spec.js

@@ -943,6 +943,7 @@ tape.test('Store creation', (subT) => {
                 await sleep(0);
 
                 t.is(store.state.hideFilter, true);
+                t.is(store.state.keepFilterOpen, false);
                 t.end();
             });
 
@@ -956,6 +957,7 @@ tape.test('Store creation', (subT) => {
                 await sleep(0);
 
                 t.is(store.state.hideFilter, false);
+                t.is(store.state.keepFilterOpen, false);
                 t.end();
             });
 
@@ -994,6 +996,7 @@ tape.test('Store creation', (subT) => {
                 await sleep(0);
 
                 t.is(store.state.hideFilter, false);
+                t.is(store.state.keepFilterOpen, false);
                 t.end();
             });
         });
@@ -1009,6 +1012,7 @@ tape.test('Store creation', (subT) => {
                 await sleep(0);
 
                 t.is(store.state.hideFilter, false);
+                t.is(store.state.keepFilterOpen, false);
                 t.end();
             });
 
@@ -1022,17 +1026,20 @@ tape.test('Store creation', (subT) => {
                 await sleep(0);
 
                 t.is(store.state.hideFilter, false);
+                t.is(store.state.keepFilterOpen, false);
 
                 /* Assert it doesn't change after fetching data */
                 store.commit('isOpen', true);
                 await sleep(0);
 
                 t.is(store.state.hideFilter, false);
+                t.is(store.state.keepFilterOpen, false);
 
                 store.commit('isOpen', false);
                 await sleep(0);
 
                 t.is(store.state.hideFilter, false);
+                t.is(store.state.keepFilterOpen, false);
                 t.end();
             });
         });
@@ -1089,6 +1096,49 @@ tape.test('Store creation', (subT) => {
                 t.end();
             });
         });
+
+        st.test('having value "open"', (sTest) => {
+            sTest.test('should show filter with few options', async (t) => {
+                const store = new Store({
+                    options: getOptions(3),
+                    params: {
+                        hideFilter: 'open',
+                    },
+                });
+                await sleep(0);
+
+                t.is(store.state.hideFilter, false);
+                t.is(store.state.keepFilterOpen, true);
+                t.end();
+            });
+
+            sTest.test('should show filter with dynamic options', async (t) => {
+                const store = new Store({
+                    fetchCallback: buildFetchCb({ total: 5 }),
+                    params: {
+                        hideFilter: 'open',
+                    },
+                });
+                await sleep(0);
+
+                t.is(store.state.hideFilter, false);
+                t.is(store.state.keepFilterOpen, true);
+
+                /* Assert it doesn't change after fetching data */
+                store.commit('isOpen', true);
+                await sleep(0);
+
+                t.is(store.state.hideFilter, false);
+                t.is(store.state.keepFilterOpen, true);
+
+                store.commit('isOpen', false);
+                await sleep(0);
+
+                t.is(store.state.hideFilter, false);
+                t.is(store.state.keepFilterOpen, true);
+                t.end();
+            });
+        });
     });
 
     subT.test('"optionBehavior" property', (st) => {

package/test/Store/Store_props.spec.js

@@ -223,6 +223,7 @@ tape.test('change props', (subT) => {
             const store = new Store({
                 value: 2,
                 options: getOptions(5, 'alpha'),
+                disabled: false,
                 params: {
                     autoDisabled: true,
                 },
@@ -249,6 +250,7 @@ tape.test('change props', (subT) => {
             const store = new Store({
                 value: 2,
                 options: getOptions(5, 'alpha'),
+                disabled: false,
                 params: {
                     autoDisabled: true,
                     strictValue: true,
@@ -298,6 +300,37 @@ tape.test('change props', (subT) => {
             t.end();
         });
 
+        sTest.test('should re-enable the select when data are loaded', async (t) => {
+            const store = new Store({
+                options: [],
+                disabled: false,
+                params: {
+                    autoDisabled: true,
+                },
+            });
+            await _.nextVueTick(store);
+
+            store.commit('isOpen', true);
+            await _.nextVueTick(store);
+
+            t.is(store.state.internalValue, null);
+            t.is(store.state.disabled, true);
+            t.is(store.state.isOpen, false);
+
+            store.props.options = getOptions(0, 'alpha');
+            await _.nextVueTick(store);
+
+            t.is(store.state.internalValue, null);
+            t.is(store.state.disabled, true), 'should be disabled';
+
+            store.props.options = getOptions(5, 'beta');
+            await _.nextVueTick(store);
+
+            t.is(store.state.internalValue, 0);
+            t.is(store.state.disabled, false), 'should be enabled';
+            t.end();
+        });
+
         sTest.test('should not re-enable the select if disable is set', async (t) => {
             const store = new Store({
                 options: getOptions(1, 'alpha'),

package/test/helper.js

@@ -8,6 +8,7 @@ function getInitialState(replacedAttributes) {
         disabled: false,
         placeholder: '',
         hideFilter: false,
+        keepFilterOpen: false,
         allowRevert: undefined,
         allowClearSelection: false,
         autoSelect: true,

package/types/List.d.ts

@@ -1,5 +1,5 @@
 import { Vue, h } from 'vtyx';
-import Store, { OptionItem, OptionId } from './Store';
+import Store, { OptionItem } from './Store';
 export interface Props {
     store: Store;
     options?: any[];
@@ -14,31 +14,7 @@ export default class List extends Vue<Props> {
     private itemHeight;
     private groupId;
     private doNotScroll;
-    get filteredOptions(): {
-        selected: boolean;
-        disabled: boolean;
-        isGroup: boolean;
-        id: OptionId;
-        text: string;
-        title?: string | undefined;
-        group?: import("./Store").StrictOptionId | undefined;
-        className?: string | undefined;
-        style?: string | undefined;
-        icon?: string | undefined;
-        options?: {
-            id: OptionId;
-            text: string;
-            title?: string | undefined;
-            disabled?: boolean | undefined;
-            group?: import("./Store").StrictOptionId | undefined;
-            className?: string | undefined;
-            style?: string | undefined;
-            icon?: string | undefined;
-            options?: any[] | undefined;
-            data?: any;
-        }[] | undefined;
-        data?: any;
-    }[];
+    get filteredOptions(): OptionItem[];
     get isMultiple(): boolean;
     get itemsMargin(): number;
     get shortOptions(): OptionItem[];

package/types/Store.d.ts

@@ -37,10 +37,11 @@ export declare type GetCallback = (_ids: OptionId[]) => Promise<OptionValue[]>;
 export declare type FormatCallback = (_option: OptionItem) => OptionItem;
 export declare type SelectionOverflow = 'collapsed' | 'multiline';
 export declare type ListPosition = 'bottom' | 'top' | 'auto';
+export declare type HideFilter = boolean | 'auto' | 'open';
 export interface SelecticStoreStateParams {
     multiple?: boolean;
     placeholder?: string;
-    hideFilter?: boolean | 'auto';
+    hideFilter?: HideFilter;
     allowRevert?: boolean;
     allowClearSelection?: boolean;
     pageSize?: number;
@@ -83,6 +84,7 @@ export interface SelecticStoreState {
     disabled: boolean;
     placeholder: string;
     hideFilter: boolean;
+    keepFilterOpen: boolean;
     allowRevert?: boolean;
     allowClearSelection: boolean;
     autoSelect: boolean;
@@ -140,140 +142,7 @@ export declare type PartialMessages = {
 export declare function changeTexts(texts: PartialMessages): void;
 export default class SelecticStore {
     props: InternalProps;
-    state: {
-        internalValue: OptionId | StrictOptionId[];
-        selectionIsExcluded: boolean;
-        multiple: boolean;
-        disabled: boolean;
-        placeholder: string;
-        hideFilter: boolean;
-        allowRevert?: boolean | undefined;
-        allowClearSelection: boolean;
-        autoSelect: boolean;
-        autoDisabled: boolean;
-        strictValue: boolean;
-        selectionOverflow: SelectionOverflow;
-        isOpen: boolean;
-        searchText: string;
-        allOptions: {
-            id: OptionId;
-            text: string;
-            title?: string | undefined;
-            disabled?: boolean | undefined;
-            group?: StrictOptionId | undefined;
-            className?: string | undefined;
-            style?: string | undefined;
-            icon?: string | undefined;
-            options?: any[] | undefined;
-            data?: any;
-        }[];
-        dynOptions: {
-            id: OptionId;
-            text: string;
-            title?: string | undefined;
-            disabled?: boolean | undefined;
-            group?: StrictOptionId | undefined;
-            className?: string | undefined;
-            style?: string | undefined;
-            icon?: string | undefined;
-            options?: any[] | undefined;
-            data?: any;
-        }[];
-        filteredOptions: {
-            selected: boolean;
-            disabled: boolean;
-            isGroup: boolean;
-            id: OptionId;
-            text: string;
-            title?: string | undefined;
-            group?: StrictOptionId | undefined;
-            className?: string | undefined;
-            style?: string | undefined;
-            icon?: string | undefined;
-            options?: {
-                id: OptionId;
-                text: string;
-                title?: string | undefined;
-                disabled?: boolean | undefined;
-                group?: StrictOptionId | undefined;
-                className?: string | undefined;
-                style?: string | undefined;
-                icon?: string | undefined;
-                options?: any[] | undefined;
-                data?: any;
-            }[] | undefined;
-            data?: any;
-        }[];
-        selectedOptions: {
-            selected: boolean;
-            disabled: boolean;
-            isGroup: boolean;
-            id: OptionId;
-            text: string;
-            title?: string | undefined;
-            group?: StrictOptionId | undefined;
-            className?: string | undefined;
-            style?: string | undefined;
-            icon?: string | undefined;
-            options?: {
-                id: OptionId;
-                text: string;
-                title?: string | undefined;
-                disabled?: boolean | undefined;
-                group?: StrictOptionId | undefined;
-                className?: string | undefined;
-                style?: string | undefined;
-                icon?: string | undefined;
-                options?: any[] | undefined;
-                data?: any;
-            }[] | undefined;
-            data?: any;
-        } | {
-            selected: boolean;
-            disabled: boolean;
-            isGroup: boolean;
-            id: OptionId;
-            text: string;
-            title?: string | undefined;
-            group?: StrictOptionId | undefined;
-            className?: string | undefined;
-            style?: string | undefined;
-            icon?: string | undefined;
-            options?: {
-                id: OptionId;
-                text: string;
-                title?: string | undefined;
-                disabled?: boolean | undefined;
-                group?: StrictOptionId | undefined;
-                className?: string | undefined;
-                style?: string | undefined;
-                icon?: string | undefined;
-                options?: any[] | undefined;
-                data?: any;
-            }[] | undefined;
-            data?: any;
-        }[] | null;
-        totalAllOptions: number;
-        totalDynOptions: number;
-        totalFilteredOptions: number;
-        groups: Map<OptionId, string>;
-        offsetItem: number;
-        activeItemIdx: number;
-        pageSize: number;
-        formatOption?: FormatCallback | undefined;
-        formatSelection?: FormatCallback | undefined;
-        optionBehaviorOperation: OptionBehaviorOperation;
-        optionBehaviorOrder: OptionBehaviorOrder[];
-        listPosition: ListPosition;
-        status: {
-            searching: boolean;
-            errorMessage: string;
-            areAllSelected: boolean;
-            hasChanged: boolean;
-            automaticChange: boolean;
-            automaticClose: boolean;
-        };
-    };
+    state: SelecticStoreState;
     data: Data;
     private requestId;
     private cacheRequest;

package/types/index.d.ts

@@ -1,9 +1,9 @@
 import { Vue, h } from 'vtyx';
 import './css/selectic.css';
-import { OptionProp, OptionId, StrictOptionId, GroupValue, SelectedValue, FetchCallback, GetCallback, PartialMessages, OptionValue, OptionItem, FormatCallback, SelectionOverflow, ListPosition } from './Store';
+import { OptionProp, OptionId, StrictOptionId, GroupValue, SelectedValue, FetchCallback, GetCallback, PartialMessages, OptionValue, OptionItem, FormatCallback, SelectionOverflow, ListPosition, HideFilter } from './Store';
 import MainInput from './MainInput';
 import ExtendedList from './ExtendedList';
-export { GroupValue, OptionValue, OptionItem, OptionProp, OptionId, StrictOptionId, SelectedValue, PartialMessages, GetCallback, FetchCallback, FormatCallback, SelectionOverflow, ListPosition, };
+export { GroupValue, OptionValue, OptionItem, OptionProp, OptionId, StrictOptionId, SelectedValue, PartialMessages, GetCallback, FetchCallback, FormatCallback, SelectionOverflow, ListPosition, HideFilter, };
 declare type EventType = 'input' | 'change' | 'open' | 'close' | 'focus' | 'blur' | 'item:click';
 export interface EventOptions {
     instance: Selectic;
@@ -17,7 +17,7 @@ export interface ParamProps {
     fetchCallback?: FetchCallback;
     getItemsCallback?: GetCallback;
     pageSize?: number;
-    hideFilter?: boolean | 'auto';
+    hideFilter?: HideFilter;
     allowRevert?: boolean;
     allowClearSelection?: boolean;
     autoSelect?: boolean;