selectic 3.1.1 → 3.1.3

package/src/index.tsx

@@ -206,11 +206,11 @@ export interface Props {
     iconFamily?: IconFamily;
 
     /** If enabled, it resets the dynamic cache when selectic opens */
-    noCache?: Boolean;
+    noCache?: boolean;
 
     /** If true, the component opens (at start or if it is closed).
      *  If false, the components closes (if it is opened). */
-    open?: Boolean;
+    open?: boolean;
 
     /** Props which is not expected to change during the life time of the
      * component.
@@ -243,7 +243,7 @@ export function changeIcons(icons: PartialIcons, iconFamily?: IconFamily) {
 export default class Selectic extends Vue<Props> {
     public $refs: {
         mainInput: MainInput;
-        extendedList: ExtendedList;
+        extendedList?: ExtendedList;
     };
 
     /* {{{ props */
@@ -349,19 +349,21 @@ export default class Selectic extends Vue<Props> {
             const store = this.store;
             const keepOpenWithOtherSelectic = this.params.keepOpenWithOtherSelectic;
             const extendedList = this.$refs.extendedList;
+            const extendedListEl: HTMLElement | undefined = extendedList?.$el;
 
-            if (!extendedList) {
+            if (!extendedListEl) {
                 /* 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)) {
+            if (!extendedListEl.contains(target) && !this.$el.contains(target)) {
                 store.commit('isOpen', false);
             }
         };
@@ -477,18 +479,27 @@ export default class Selectic extends Vue<Props> {
     /* {{{ private methods */
 
     private computeWidth() {
-        const el = this.$refs.mainInput.$el as HTMLElement;
+        const mainInput = this.$refs?.mainInput;
+
+        const mainEl: HTMLElement | undefined = mainInput?.$el;
 
-        this.width = el.offsetWidth;
+        if (!mainEl) {
+            /* This method has been called too soon (before render function)
+             * or too late (after unmount) */
+            return;
+        }
+
+        this.width = mainEl.offsetWidth;
     }
 
     private computeOffset(doNotAddListener = false) {
-        const mainInput = this.$refs.mainInput;
+        const mainInput = this.$refs?.mainInput;
 
-        const mainEl = mainInput?.$el as HTMLElement;
+        const mainEl: HTMLElement | undefined = mainInput?.$el;
 
         if (!mainEl) {
-            /* This method has been called too soon (before render function) */
+            /* This method has been called too soon (before render function)
+             * or too late (after unmount) */
             return;
         }
 
@@ -669,13 +680,13 @@ export default class Selectic extends Vue<Props> {
         /* Await that focused element becomes active */
         setTimeout(() => {
             const focusedEl = document.activeElement;
-            const extendedList = this.$refs.extendedList;
+            const extendedList = this.$refs?.extendedList;
 
             /* check if there is a focused element (if none the body is
              * selected) and if it is inside current Selectic */
             if (focusedEl === document.body
             ||  this.$el.contains(focusedEl)
-            ||  (extendedList && extendedList.$el.contains(focusedEl)))
+            ||  extendedList?.$el.contains(focusedEl))
             {
                 return;
             }

package/src/tools.ts

@@ -117,3 +117,16 @@ export function compareOptions(oldOptions: OptionValue[], newOptions: OptionValu
         });
     });
 }
+
+let displayLog = false;
+export function debug(fName: string, step: string, ...args: any[]) {
+    if (!displayLog) {
+        return;
+    }
+
+    console.log('--%s-- [%s]', fName, step, ...args);
+}
+/** Enable logs for debugging */
+debug.enable = (display: boolean) => {
+    displayLog = display;
+};

package/test/Store/Store_creation.spec.js

@@ -699,6 +699,80 @@ tape.test('Store creation', (subT) => {
             t.end();
         });
 
+        sTest.test('should disable multiple select with the only enabled value selected', async (t) => {
+            const options = getOptions(3);
+            options[0].disabled = true;
+            options[1].disabled = true;
+
+            const store = new Store({
+                options: options,
+                disabled: false,
+                value: [2],
+                params: {
+                    multiple: true,
+                    autoDisabled: true,
+                    allowClearSelection: false,
+                },
+            });
+
+            await sleep(0);
+
+            t.is(store.state.disabled, true);
+            t.deepEqual(store.state.internalValue, [2]);
+
+            t.end();
+        });
+
+        sTest.test('should not disable multiple select when it is possible to remove selected value', async (t) => {
+            const options = getOptions(3);
+            options[0].disabled = true;
+            options[1].disabled = true;
+
+            const store = new Store({
+                options: options,
+                disabled: false,
+                value: [1, 2],
+                params: {
+                    multiple: true,
+                    autoDisabled: true,
+                    allowClearSelection: false,
+                },
+            });
+
+            await sleep(0);
+
+            /* It is possible to remove the item "2" because there is another value */
+            t.is(store.state.disabled, false);
+            t.deepEqual(store.state.internalValue, [1, 2]);
+
+            t.end();
+        });
+
+        sTest.test('should disable multiple select when exclusive disabled item is selected', async (t) => {
+            const options = getOptions(3);
+            options[1].disabled = true;
+            options[1].exclusive = true;
+
+            const store = new Store({
+                options: options,
+                disabled: false,
+                value: [1],
+                params: {
+                    multiple: true,
+                    autoDisabled: true,
+                    allowClearSelection: false,
+                },
+            });
+
+            await sleep(0);
+
+            /* It is not possible to change the value */
+            t.is(store.state.disabled, true);
+            t.deepEqual(store.state.internalValue, [1]);
+
+            t.end();
+        });
+
         sTest.test('should not disable select without autoDisabled', async (t) => {
             const store = new Store({
                 options: getOptions(1),
@@ -788,7 +862,7 @@ tape.test('Store creation', (subT) => {
 
             /* Load data */
             store.commit('isOpen', true);
-            await _.nextVueTick(store, spy.promise);
+            await _.nextVueTick(store, spy.promise, sleep(0) /* await request resolution */);
             store.commit('isOpen', false);
             await sleep(0);
 
@@ -1343,7 +1417,7 @@ tape.test('Store creation', (subT) => {
                 await sleep(0);
                 t.is(store1.state.filteredOptions.length, 0);
                 command1.fetch();
-                await _.nextVueTick(store1, spy1.promise);
+                await _.nextVueTick(store1, spy1.promise, sleep(0) /* await request resolution */);
 
                 t.is(store1.state.filteredOptions.length, 4);
 
@@ -1385,7 +1459,7 @@ tape.test('Store creation', (subT) => {
                 store1.commit('isOpen', true);
                 await sleep(0);
                 command1.fetch();
-                await _.nextVueTick(store1, spy1.promise);
+                await _.nextVueTick(store1, spy1.promise, sleep(0) /* await request resolution */);
 
                 t.is(store1.state.filteredOptions.length, 3, 'should contain the groups');
 
@@ -1405,7 +1479,7 @@ tape.test('Store creation', (subT) => {
                 store2.commit('isOpen', true);
                 await sleep(0);
                 command2.fetch();
-                await _.nextVueTick(store2, spy2.promise);
+                await _.nextVueTick(store2, spy2.promise, sleep(0) /* await request resolution */);
 
                 t.is(store2.state.filteredOptions.length, 4);
 
@@ -1425,7 +1499,7 @@ tape.test('Store creation', (subT) => {
                 store3.commit('isOpen', true);
                 await sleep(0);
                 command3.fetch();
-                await _.nextVueTick(store3, spy3.promise);
+                await _.nextVueTick(store3, spy3.promise, sleep(0) /* await request resolution */);
 
                 t.is(store3.state.filteredOptions.length, 2);
                 t.end();
@@ -1449,7 +1523,7 @@ tape.test('Store creation', (subT) => {
                 store1.commit('isOpen', true);
                 await sleep(0);
                 command1.fetch();
-                await _.nextVueTick(store1, spy1.promise);
+                await _.nextVueTick(store1, spy1.promise, sleep(0) /* await request resolution */);
 
                 t.is(store1.state.filteredOptions.length, 3);
 
@@ -1470,7 +1544,7 @@ tape.test('Store creation', (subT) => {
                 store2.commit('isOpen', true);
                 await sleep(0);
                 command2.fetch();
-                await _.nextVueTick(store2, spy2.promise);
+                await _.nextVueTick(store2, spy2.promise, sleep(0) /* await request resolution */);
 
                 t.is(store2.state.filteredOptions.length, 4);
 
@@ -1491,7 +1565,7 @@ tape.test('Store creation', (subT) => {
                 store3.commit('isOpen', true);
                 await sleep(0);
                 command3.fetch();
-                await _.nextVueTick(store3, spy3.promise);
+                await _.nextVueTick(store3, spy3.promise, sleep(0) /* await request resolution */);
 
                 t.is(store3.state.filteredOptions.length, 2);
                 t.end();
@@ -1540,7 +1614,7 @@ tape.test('Store creation', (subT) => {
                 await sleep(0);
                 t.is(store1.state.filteredOptions.length, 0);
                 command1.fetch();
-                await _.nextVueTick(store1, spy1.promise);
+                await _.nextVueTick(store1, spy1.promise, sleep(0) /* await request resolution */);
 
                 t.is(store1.state.filteredOptions.length, 9);
                 t.end();
@@ -1565,7 +1639,7 @@ tape.test('Store creation', (subT) => {
                 t.is(store.state.filteredOptions.length, 5); // previous options should be displayed
                 t.true(toHaveBeenCalledWith(spy, ['', 0, 100])); // dynamic index should always start at 0
                 command.fetch();
-                await _.nextVueTick(store, spy.promise);
+                await _.nextVueTick(store, spy.promise, sleep(0) /* await request resolution */);
 
                 t.is(store.state.filteredOptions.length, 9); // finally all options should be displayed
                 t.end();
@@ -1590,7 +1664,7 @@ tape.test('Store creation', (subT) => {
                 t.true(toHaveBeenCalledWith(spy1, ['', 0, 100]));
 
                 command1.fetch();
-                await _.nextVueTick(store1, spy1.promise);
+                await _.nextVueTick(store1, spy1.promise, sleep(0) /* await request resolution */);
 
                 t.is(store1.state.allOptions.length, 104);
                 t.is(store1.state.filteredOptions.length, 104);
@@ -1675,7 +1749,7 @@ tape.test('Store creation', (subT) => {
             t.true(toHaveBeenCalled(spy));
 
             command.fetch();
-            await _.nextVueTick(store, spy.promise);
+            await _.nextVueTick(store, spy.promise, sleep(0) /* await request resolution */);
 
             t.is(store.state.isOpen, true);
             t.is(store.state.filteredOptions.length, 4);