selectic 3.0.19 → 3.0.21

package/src/MainInput.tsx

@@ -32,6 +32,9 @@ export default class MainInput extends Vue<Props> {
 
     private nbHiddenItems = 0;
 
+    /* reactivity non needed */
+    private domObserver: MutationObserver | null = null;
+
     /* }}} */
     /* {{{ computed */
 
@@ -79,19 +82,34 @@ export default class MainInput extends Vue<Props> {
         return !isMultiple || !hasOnlyOneValue;
     }
 
-    get clearedLabel() {
+    get clearedLabel(): string {
         const isMultiple = this.store.state.multiple;
         const labelKey = isMultiple ? 'clearSelections' : 'clearSelection';
 
         return this.store.data.labels[labelKey];
     }
 
-    get singleSelectedItem() {
+    get singleSelectedItem(): undefined | OptionItem {
         const state = this.store.state;
         const isMultiple = state.multiple;
-        const selected = this.selectedOptions;
 
-        return !isMultiple && !!selected && (selected as OptionItem).text;
+        if (isMultiple) {
+            return;
+        }
+
+        return this.selectedOptions as OptionItem;
+    }
+
+    get singleSelectedItemText(): string {
+        const item = this.singleSelectedItem;
+
+        return item?.text || '';
+    }
+
+    get singleSelectedItemTitle(): string {
+        const item = this.singleSelectedItem;
+
+        return item?.title || item?.text || '';
     }
 
     get singleStyle() {
@@ -221,6 +239,13 @@ export default class MainInput extends Vue<Props> {
          * currently shown */
         const el = this.$refs.selectedItems;
         const parentEl = el.parentElement as HTMLDivElement;
+
+        if (!document.contains(parentEl)) {
+            /* The element is currently not in DOM */
+            this.createObserver(parentEl);
+            return;
+        }
+
         const parentPadding = parseInt(getComputedStyle(parentEl).getPropertyValue('padding-right'), 10);
         const clearEl = parentEl.querySelector('.selectic-input__clear-icon')  as HTMLSpanElement;
         const clearWidth = clearEl ? clearEl.offsetWidth : 0;
@@ -261,6 +286,36 @@ export default class MainInput extends Vue<Props> {
         this.nbHiddenItems = selectedOptions.length - idx;
     }
 
+    private closeObserver() {
+        const observer = this.domObserver;
+        if (observer) {
+            observer.disconnect();
+        }
+        this.domObserver = null;
+    }
+
+    private createObserver(el: HTMLElement) {
+        this.closeObserver();
+        const observer = new MutationObserver((mutationsList) => {
+            for (const mutation of mutationsList) {
+                if (mutation.type === 'childList') {
+                    for (const elMutated of Array.from(mutation.addedNodes)) {
+                        /* Check that element has been added to DOM */
+                        if (elMutated.contains(el)) {
+                            this.closeObserver();
+                            this.computeSize();
+                            return;
+                        }
+                    }
+                }
+            }
+        });
+        const config = { childList: true, subtree: true };
+
+        observer.observe(document, config);
+        this.domObserver = observer;
+    }
+
     /* }}} */
     /* {{{ watch */
 
@@ -276,6 +331,10 @@ export default class MainInput extends Vue<Props> {
         this.computeSize();
     }
 
+    public beforeUnmount() {
+        this.closeObserver();
+    }
+
     /* }}} */
 
     public render() {
@@ -298,9 +357,9 @@ export default class MainInput extends Vue<Props> {
                 <span
                     class="selectic-item_text"
                     style={this.singleStyle}
-                    title={this.singleSelectedItem || ''}
+                    title={this.singleSelectedItemTitle}
                 >
-                    {this.singleSelectedItem}
+                    {this.singleSelectedItemText}
                 </span>
             )}
             {this.displayPlaceholder && (
@@ -330,7 +389,7 @@ export default class MainInput extends Vue<Props> {
                             <div
                                 class="single-value"
                                 style={item.style}
-                                title={item.text}
+                                title={item.title || item.text}
                                 on={{
                                     click: () => this.$emit('item:click', item.id),
                                 }}

package/src/Store.tsx

@@ -5,7 +5,7 @@
  */
 
 import { reactive, watch, unref, computed, ComputedRef } from 'vue';
-import { convertToRegExp, assignObject, deepClone } from './tools';
+import { convertToRegExp, assignObject, deepClone, compareOptions } from './tools';
 
 /* {{{ Types definitions */
 
@@ -346,6 +346,7 @@ interface Messages {
     moreSelectedItem: string;
     moreSelectedItems: string;
     unknownPropertyValue: string;
+    wrongQueryResult: string;
 }
 
 export type PartialMessages = { [K in keyof Messages]?: Messages[K] };
@@ -376,6 +377,7 @@ let messages: Messages = {
     moreSelectedItem: '+1 other',
     moreSelectedItems: '+%d others',
     unknownPropertyValue: 'property "%s" has incorrect values.',
+    wrongQueryResult: 'Query did not return all results.',
 };
 
 let closePreviousSelectic: undefined | voidCaller;
@@ -1165,7 +1167,7 @@ export default class SelecticStore {
         return childOptions;
     }
 
-    private buildAllOptions(keepFetched = false) {
+    private buildAllOptions(keepFetched = false, stopFetch = false) {
         const allOptions: OptionValue[] = [];
         let listOptions: OptionValue[] = [];
         let elementOptions: OptionValue[] = [];
@@ -1242,13 +1244,26 @@ export default class SelecticStore {
             }
         }
 
-        this.state.filteredOptions = [];
-        this.state.totalFilteredOptions = Infinity;
+        if (!stopFetch) {
+            this.state.filteredOptions = [];
+            this.state.totalFilteredOptions = Infinity;
 
-        this.buildFilteredOptions().then(() => {
-            /* XXX: To recompute for strict mode and auto-select */
-            this.assertCorrectValue();
-        });
+            this.buildFilteredOptions().then(() => {
+                /* XXX: To recompute for strict mode and auto-select */
+                this.assertCorrectValue();
+            });
+        } else {
+            /* Do not fetch again just build filteredOptions */
+            const search = this.state.searchText;
+            if (!search) {
+                this.state.filteredOptions = this.buildGroupItems(allOptions);
+                this.state.totalFilteredOptions = this.state.filteredOptions.length;
+                return;
+            }
+            const options = this.filterOptions(allOptions, search);
+            this.state.filteredOptions = options;
+            this.state.totalFilteredOptions = this.state.filteredOptions.length;
+        }
     }
 
     private async buildFilteredOptions() {
@@ -1407,6 +1422,7 @@ export default class SelecticStore {
             const requestId = ++this.requestId;
             const {total: rTotal, result} = await fetchCallback(search, offset, limit);
             let total = rTotal;
+            let errorMessage = '';
 
             /* Assert result is correctly formatted */
             if (!Array.isArray(result)) {
@@ -1426,8 +1442,22 @@ export default class SelecticStore {
             if (!search) {
                 /* update cache */
                 state.totalDynOptions = total;
-                state.dynOptions.splice(offset, limit, ...result);
-                setTimeout(() => this.buildAllOptions(true), 0);
+                const old = state.dynOptions.splice(offset, limit, ...result);
+                if (compareOptions(old, result)) {
+                    /* Added options are the same as previous ones.
+                     * Stop fetching to avoid infinite loop
+                     */
+                    if (!this.hasFetchedAllItems) {
+                        /* Display error if all items are not fetch
+                         * We can have the case where old value and result
+                         * are the same but total is correct when the
+                         * total is 0 */
+                        errorMessage = labels.wrongQueryResult;
+                    }
+                    setTimeout(() => this.buildAllOptions(true, true), 0);
+                } else {
+                    setTimeout(() => this.buildAllOptions(true), 0);
+                }
             }
 
             /* Check request is not obsolete */
@@ -1456,12 +1486,12 @@ export default class SelecticStore {
                 this.addStaticFilteredOptions(true);
             }
 
-            state.status.errorMessage = '';
+            state.status.errorMessage = errorMessage;
         } catch (e) {
             state.status.errorMessage = (e as Error).message;
             if (!search) {
                 state.totalDynOptions = 0;
-                this.buildAllOptions(true);
+                this.buildAllOptions(true, true);
             }
         }
 

package/src/tools.ts

@@ -1,4 +1,5 @@
 import { unref } from 'vue';
+import { OptionValue } from './Store';
 
 /**
  * Clone the object and its inner properties.
@@ -86,3 +87,33 @@ export function assignObject<T>(obj: Partial<T>, ...sourceObjects: Array<Partial
     }
     return result as T;
 }
+
+/** Compare 2 list of options.
+ * @returns true if there are no difference
+ */
+export function compareOptions(oldOptions: OptionValue[], newOptions: OptionValue[]): boolean {
+    if (oldOptions.length !== newOptions.length) {
+        return false;
+    }
+
+    return oldOptions.every((oldOption, idx) => {
+        const newOption = newOptions[idx];
+        const keys = Object.keys(oldOption);
+        if (keys.length !== Object.keys(newOption).length) {
+            return false;
+        }
+        return keys.every((optionKey) => {
+            const key = optionKey as keyof OptionValue;
+            const oldValue = oldOption[key];
+            const newValue = newOption[key];
+
+            if (key === 'options') {
+                return compareOptions(oldValue, newValue);
+            }
+            if (key === 'data') {
+                return JSON.stringify(oldValue) === JSON.stringify(newValue);
+            }
+            return oldValue === newValue;
+        });
+    });
+}

package/test/Store/Store_creation.spec.js

@@ -1387,7 +1387,7 @@ tape.test('Store creation', (subT) => {
                 command1.fetch();
                 await _.nextVueTick(store1, spy1.promise);
 
-                t.is(store1.state.filteredOptions.length, 3);
+                t.is(store1.state.filteredOptions.length, 3, 'should contain the groups');
 
                 const command2 = {};
                 const spy2 = {};

package/test/Store/commit.spec.js

@@ -748,6 +748,186 @@ tape.test('commit()', (st) => {
                 t.true(toHaveBeenCalledWith(spy, ['', 100, 200]));
                 t.deepEqual(store.state.allOptions.length, 300);
                 t.deepEqual(store.state.offsetItem, 180);
+                t.is(store.state.status.errorMessage, '');
+
+                t.end();
+            });
+
+            sTest.test('should fetch only once', async (t) => {
+                const command = {};
+                let nbTry = 0;
+
+                const store = new Store({
+                    fetchCallback: buildFetchCb({ total: 500, command }),
+                });
+                command.usage = 0;
+                store.commit('isOpen', true);
+
+                nbTry = 0;
+                while (nbTry !== command.usage && nbTry < 10) {
+                    nbTry = command.usage;
+                    command.fetch();
+                    await _.nextVueTick(store, command.promise);
+                }
+
+                t.is(command.usage, 1, 'the fetch is done only once to get first page');
+                t.is(store.state.status.errorMessage, '');
+
+                command.usage = 0;
+                store.commit('offsetItem', 180);
+                nbTry = 0;
+                while (nbTry !== command.usage && nbTry < 10) {
+                    nbTry = command.usage;
+                    command.fetch();
+                    await _.nextVueTick(store, command.promise);
+                }
+
+                t.is(command.usage, 1, 'fetch missing options only once');
+                t.is(store.state.status.errorMessage, '');
+
+                t.deepEqual(store.state.allOptions.length, 300);
+
+                t.end();
+            });
+
+            sTest.test('should fetch several time if needed', async (t) => {
+                const command = {};
+                let nbTry = 0;
+
+                const store = new Store({
+                    fetchCallback: buildFetchCb({ total: 500, command }),
+                });
+                command.usage = 0;
+                store.commit('isOpen', true);
+
+                command.interceptResult = (result) => {
+                    switch (command.usage) {
+                        case 1:
+                            /* returns only some of the first options */
+                            result.result = result.result.slice(0, 15);
+                            break;
+                        case 2:
+                            /* returns only some options */
+                            result.result = result.result.slice(0, 25);
+                        default:
+                            /* do not change the result */
+                    }
+                    return result;
+                };
+
+                nbTry = 0;
+                while (nbTry !== command.usage && nbTry < 10) {
+                    nbTry = command.usage;
+                    command.fetch();
+                    await _.nextVueTick(store, command.promise);
+                }
+
+                t.is(command.usage > 1, true, 'should fetch first options with several fetch');
+                t.is(command.usage < 10, true, 'should have stop fetching by itself');
+                t.is(store.state.allOptions.length >= 50, true, 'should have retrieve the first options');
+                t.is(store.state.status.errorMessage, '');
+
+                command.usage = 0;
+                store.commit('offsetItem', 180);
+                nbTry = 0;
+                while (nbTry !== command.usage && nbTry < 10) {
+                    nbTry = command.usage;
+                    command.fetch();
+                    await _.nextVueTick(store, command.promise);
+                }
+
+                t.is(command.usage > 1, true, 'should fetch missing options with several fetch');
+                t.is(command.usage < 10, true, 'should have stop fetching by itself');
+
+                t.deepEqual(store.state.allOptions.length, 300);
+                t.is(store.state.status.errorMessage, '');
+
+                t.end();
+            });
+
+            sTest.test('should stop fetching with wrong result: similar results', async (t) => {
+                const command = {};
+                let nbTry = 0;
+
+                const store = new Store({
+                    fetchCallback: buildFetchCb({ total: 500, command }),
+                });
+                command.usage = 0;
+                store.commit('isOpen', true);
+
+                command.interceptResult = (result) => {
+                    /* Returns only the 2 first options */
+                    result.result = result.result.slice(0, 2);
+
+                    return result;
+                };
+
+                nbTry = 0;
+                while (nbTry !== command.usage && nbTry < 10) {
+                    nbTry = command.usage;
+                    command.fetch();
+                    await _.nextVueTick(store, command.promise);
+                }
+
+                t.is(command.usage > 1, true, 'should have try to fetch several times');
+                t.is(command.usage < 10, true, 'should have stop fetching');
+                t.is(store.state.status.errorMessage, store.data.labels.wrongQueryResult);
+
+                command.usage = 0;
+                store.commit('offsetItem', 180);
+                nbTry = 0;
+                while (nbTry !== command.usage && nbTry < 10) {
+                    nbTry = command.usage;
+                    command.fetch();
+                    await _.nextVueTick(store, command.promise);
+                }
+
+                t.is(command.usage < 10, true, 'should have stop fetching');
+                t.is(store.state.status.errorMessage, store.data.labels.wrongQueryResult);
+
+                t.end();
+            });
+
+            sTest.test('should stop fetching with wrong result: wrong total', async (t) => {
+                const command = {};
+                let nbTry = 0;
+
+                const store = new Store({
+                    fetchCallback: buildFetchCb({ total: 20, command }),
+                });
+                command.usage = 0;
+                store.commit('isOpen', true);
+
+                command.interceptResult = (result) => {
+                    result.total = 50;
+
+                    return result;
+                };
+
+                nbTry = 0;
+                while (nbTry !== command.usage && nbTry < 10) {
+                    nbTry = command.usage;
+                    command.fetch();
+                    await _.nextVueTick(store, command.promise);
+                }
+
+                t.is(command.usage > 1, true, 'should have try to fetch several times');
+                t.is(command.usage < 10, true, 'should have stop fetching');
+                t.is(store.state.status.errorMessage, store.data.labels.wrongQueryResult);
+
+                command.usage = 0;
+                store.commit('offsetItem', 30);
+                nbTry = 0;
+                while (nbTry !== command.usage && nbTry < 10) {
+                    nbTry = command.usage;
+                    command.fetch();
+                    await _.nextVueTick(store, command.promise);
+                }
+
+                t.is(command.usage < 10, true, 'should have stop fetching');
+                t.is(store.state.status.errorMessage, store.data.labels.wrongQueryResult);
+
+                t.deepEqual(store.state.allOptions.length, 20);
 
                 t.end();
             });

package/test/helper.js

@@ -101,6 +101,7 @@ function buildFetchCb({
         command.reject = () => {};
         command.promise = () => {};
         command.fetch = () => {};
+        command.usage = 0;
     }
 
     return (search, offset, limit) => {
@@ -128,10 +129,16 @@ function buildFetchCb({
             });
 
             function resolveFetch() {
-                resolve({
+                let result = {
                     total,
                     result: getOptions(nb, prefix, offset, groupName),
-                });
+                };
+
+                if (command && command.interceptResult) {
+                    result = command.interceptResult(result);
+                }
+
+                resolve(result);
             }
 
             if (command) {
@@ -145,6 +152,7 @@ function buildFetchCb({
 
         if (command) {
             command.promise = fetchPromise;
+            command.usage++;
         }
         spy.promise = fetchPromise;
 

package/types/MainInput.d.ts

@@ -11,13 +11,16 @@ export default class MainInput extends Vue<Props> {
     private store;
     private id;
     private nbHiddenItems;
+    private domObserver;
     get isDisabled(): boolean;
     get hasValue(): boolean;
     get displayPlaceholder(): boolean;
     get canBeCleared(): boolean;
     get showClearAll(): boolean;
     get clearedLabel(): string;
-    get singleSelectedItem(): string | false;
+    get singleSelectedItem(): undefined | OptionItem;
+    get singleSelectedItemText(): string;
+    get singleSelectedItemTitle(): string;
     get singleStyle(): string | undefined;
     get selecticId(): string | undefined;
     get isSelectionReversed(): boolean;
@@ -31,7 +34,10 @@ export default class MainInput extends Vue<Props> {
     private selectItem;
     private clearSelection;
     private computeSize;
+    private closeObserver;
+    private createObserver;
     onInternalChange(): void;
     updated(): void;
+    beforeUnmount(): void;
     render(): h.JSX.Element;
 }

package/types/Store.d.ts

@@ -139,6 +139,7 @@ interface Messages {
     moreSelectedItem: string;
     moreSelectedItems: string;
     unknownPropertyValue: string;
+    wrongQueryResult: string;
 }
 export declare type PartialMessages = {
     [K in keyof Messages]?: Messages[K];

package/types/tools.d.ts

@@ -1,3 +1,4 @@
+import { OptionValue } from './Store';
 /**
  * Clone the object and its inner properties.
  * @param obj The object to be clone.
@@ -20,3 +21,7 @@ export declare function deepClone<T = any>(origObject: T, ignoreAttributes?: str
 export declare function convertToRegExp(name: string, flag?: string): RegExp;
 /** Does the same as Object.assign but does not replace if value is undefined */
 export declare function assignObject<T>(obj: Partial<T>, ...sourceObjects: Array<Partial<T>>): T;
+/** Compare 2 list of options.
+ * @returns true if there are no difference
+ */
+export declare function compareOptions(oldOptions: OptionValue[], newOptions: OptionValue[]): boolean;