selectic 3.1.2 → 3.1.4

package/src/Store.tsx

@@ -939,24 +939,58 @@ export default class SelecticStore {
                 selected = !isAlreadySelected;
             }
 
+            const selectedOptions = Array.isArray(state.selectedOptions)
+                ? state.selectedOptions
+                : [];
+
             if (id === null) {
-                state.internalValue = [];
-                hasChanged = internalValue.length > 0;
+                /* Keep disabled items: we cannot removed them because they
+                 * are disabled */
+                const newSelection = selectedOptions.reduce((list, item) => {
+                    if (item.disabled && item.id) {
+                        list.push(item.id);
+                    }
+
+                    return list;
+                }, [] as StrictOptionId[]);
+
+                state.internalValue = newSelection;
+                hasChanged = internalValue.length > newSelection.length;
             } else
             if (selected && !isAlreadySelected) {
+                let addItem = true;
+
                 if (item?.exclusive) {
-                    /* clear the current selection because the item is exclusive */
-                    internalValue.splice(0, Infinity);
+                    const hasDisabledSelected = selectedOptions.some((opt) => {
+                        return opt.disabled;
+                    });
+
+                    if (hasDisabledSelected) {
+                        /* do not remove disabled item from selection */
+                        addItem = false;
+                    } else {
+                        /* clear the current selection because the item is exclusive */
+                        internalValue.splice(0, Infinity);
+                    }
                 } else if (internalValue.length === 1) {
                     const selectedId = internalValue[0];
                     const selectedItem = state.allOptions.find((opt) => opt.id === selectedId);
+
                     if (selectedItem?.exclusive) {
-                        /* clear the current selection because the old item was exclusive */
-                        internalValue.pop();
+                        if (selectedItem.disabled) {
+                            /* If selected item is disabled and exclusive do not change the selection */
+                            addItem = false;
+                        } else {
+                            /* clear the current selection because the old item was exclusive */
+                            internalValue.pop();
+                        }
                     }
                 }
-                internalValue.push(id);
-                hasChanged = true;
+
+                if (addItem) {
+                    internalValue.push(id);
+                    hasChanged = true;
+                }
             } else
             if (!selected && isAlreadySelected) {
                 internalValue.splice(internalValue.indexOf(id), 1);
@@ -982,6 +1016,14 @@ export default class SelecticStore {
                 if (id !== oldValue) {
                     return hasChanged;
                 }
+
+                const oldOption = state.selectedOptions as OptionItem | null;
+
+                if (oldOption?.disabled) {
+                    /* old selection is disabled so do not unselect it */
+                    return hasChanged;
+                }
+
                 id = null;
             } else
             if (id === oldValue) {
@@ -1925,18 +1967,27 @@ export default class SelecticStore {
             return;
         }
 
+        const selectedOptions = state.selectedOptions;
         const enabledOptions = state.allOptions.filter((opt) => !opt.disabled);
-        const nb = enabledOptions.length;
+        const nbEnabled = enabledOptions.length;
         const value = state.internalValue;
         const hasValue = Array.isArray(value) ? value.length > 0 : value !== null;
-        const hasValidValue = hasValue && (
+        const hasDisabledSelected = Array.isArray(selectedOptions)
+            ? selectedOptions.some((opt) => opt.disabled)
+            : false;
+        const hasOnlyValidValue = hasValue && !hasDisabledSelected && (
             Array.isArray(value) ? value.every((val) => this.hasValue(val)) :
             this.hasValue(value)
         );
-        const isEmpty = nb === 0;
-        const hasOnlyOneOption = nb === 1 && hasValidValue && !state.allowClearSelection;
 
-        if (hasOnlyOneOption || isEmpty) {
+        const isEmpty = nbEnabled === 0;
+        const hasOnlyOneOption = nbEnabled === 1 && hasOnlyValidValue && !state.allowClearSelection;
+        const isExclusiveDisabledItem = Array.isArray(selectedOptions) /* which means "multiple" mode */
+            && selectedOptions.length === 1
+            && selectedOptions[0].exclusive
+            && selectedOptions[0].disabled;
+
+        if (hasOnlyOneOption || isEmpty || isExclusiveDisabledItem) {
             if (state.isOpen) {
                 this.setAutomaticClose();
                 this.commit('isOpen', false);

package/src/css/selectic.css

@@ -244,6 +244,9 @@
 .selectic-item__active:not(.selected) .selectic-item_icon {
     opacity: 0.2;
 }
+.selectic-item__active.selectic-item__disabled:not(.selected) .selectic-item_icon {
+    opacity: 0;
+}
 
 .selectic-item__disabled {
     color: var(--selectic-color-disabled);

package/src/index.tsx

@@ -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/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),

package/test/Store/selectItem.spec.js

@@ -31,7 +31,7 @@ tape.test('selectItem()', (st) => {
             const result1 = store.selectItem(2, true);
             t.is(store.state.internalValue, 2);
             t.is(store.state.status.hasChanged, true);
-            t.is(result1, true, 'should return if a change occurs');
+            t.is(result1, true, 'should return true if a change occurs');
 
             /* reset status to check that it is modified */
             store.state.status.hasChanged = false;
@@ -39,7 +39,17 @@ tape.test('selectItem()', (st) => {
             const result2 = store.selectItem(5, true);
             t.is(store.state.internalValue, 5);
             t.is(store.state.status.hasChanged, true);
-            t.is(result2, true, 'should return if a change occurs');
+            t.is(result2, true, 'should return true if a change occurs');
+
+            /* Should replace a disabled selected item */
+            store.commit('internalValue', 4);
+            store.state.status.hasChanged = false;
+
+            const result3 = store.selectItem(3);
+            t.is(store.state.internalValue, 3);
+            t.is(store.state.status.hasChanged, true);
+            t.is(result3, true, 'should return true if a change occurs');
+
             t.end();
         });
 
@@ -50,12 +60,24 @@ tape.test('selectItem()', (st) => {
             /* reset status to check that it is modified */
             store.state.status.hasChanged = false;
 
-            const result = store.selectItem(2, false);
+            const result1 = store.selectItem(2, false);
             t.is(store.state.internalValue, null);
             t.is(store.state.status.hasChanged, true);
 
             t.is(store.state.selectionIsExcluded, false);
-            t.is(result, true, 'should return if a change occurs');
+            t.is(result1, true, 'should return true if a change occurs');
+
+            /* Should not deselect a disabled selected item */
+            store.commit('internalValue', 4);
+            store.state.status.hasChanged = false;
+
+            const result2 = store.selectItem(4, false);
+            t.is(store.state.internalValue, 4);
+            t.is(store.state.status.hasChanged, false);
+
+            t.is(store.state.selectionIsExcluded, false);
+            t.is(result2, false, 'should return false if no change occurs');
+
             t.end();
         });
 
@@ -173,31 +195,40 @@ tape.test('selectItem()', (st) => {
         sTest.test('should clear selection', (t) => {
             const store = getStore();
             store.commit('isOpen', true);
-            store.state.internalValue = 1;
+            store.commit('internalValue', 1);
 
             const result1 = store.selectItem(null);
             t.is(store.state.isOpen, false);
             t.is(store.state.internalValue, null);
             t.is(store.state.status.hasChanged, true);
-            t.is(result1, true, 'should return if a change occurs');
+            t.is(result1, true, 'should return true if a change occurs');
 
+            store.commit('internalValue', 2);
             store.state.status.hasChanged = false;
-            store.state.internalValue = 2;
 
             /* applied also when selectic is closed */
             const result2 = store.selectItem(null);
             t.is(store.state.internalValue, null);
             t.is(store.state.status.hasChanged, true);
-            t.is(result2, true, 'should return if a change occurs');
+            t.is(result2, true, 'should return true if a change occurs');
 
+            store.commit('internalValue', 3);
             store.state.status.hasChanged = false;
-            store.state.internalValue = 3;
 
             /* ignore the selected argument */
             const result3 = store.selectItem(null, false);
             t.is(store.state.internalValue, null);
             t.is(store.state.status.hasChanged, true);
-            t.is(result3, true, 'should return if a change occurs');
+            t.is(result3, true, 'should return true if a change occurs');
+
+            /* Should removed a disabled selected item */
+            store.commit('internalValue', 4);
+            store.state.status.hasChanged = false;
+
+            const result4 = store.selectItem(null, false);
+            t.is(store.state.internalValue, null);
+            t.is(store.state.status.hasChanged, true);
+            t.is(result4, true, 'should return true if a change occurs');
 
             t.end();
         });
@@ -225,10 +256,12 @@ tape.test('selectItem()', (st) => {
 
     st.test('when "multiple" is true', (sTest) => {
         function getStore() {
-            const options = getOptions(8);
+            const options = getOptions(9);
             options[4].disabled = true;
             options[6].exclusive = true;
             options[7].exclusive = true;
+            options[8].disabled = true;
+            options[8].exclusive = true;
 
             const store = new Store({
                 options: options,
@@ -410,24 +443,24 @@ tape.test('selectItem()', (st) => {
 
         sTest.test('should clear selection', (t) => {
             const store = getStore();
-            store.state.internalValue = [1, 4];
+            store.commit('internalValue', [1, 3]);
 
             const result1 = store.selectItem(null);
             t.deepEqual(store.state.internalValue, []);
             t.is(store.state.status.hasChanged, true);
-            t.is(result1, true, 'should return if a change occurs');
+            t.is(result1, true, 'should return true if a change occurs');
 
+            store.commit('internalValue', [2, 3]);
             store.state.status.hasChanged = false;
-            store.state.internalValue = [2, 4];
 
             /* ignore the selected argument */
             const result2 = store.selectItem(null, false);
             t.deepEqual(store.state.internalValue, []);
             t.is(store.state.status.hasChanged, true);
-            t.is(result2, true, 'should return if a change occurs');
+            t.is(result2, true, 'should return true if a change occurs');
 
+            store.commit('internalValue', [3, 5]);
             store.state.status.hasChanged = false;
-            store.state.internalValue = [3, 4];
 
             /* applied also when selectic is open */
             store.commit('isOpen', true);
@@ -435,7 +468,33 @@ tape.test('selectItem()', (st) => {
             t.is(store.state.isOpen, true);
             t.deepEqual(store.state.internalValue, []);
             t.is(store.state.status.hasChanged, true);
-            t.is(result3, true, 'should return if a change occurs');
+            t.is(result3, true, 'should return true if a change occurs');
+            t.end();
+        });
+
+        sTest.test('should clear selection with disabled item', (t) => {
+            const store = getStore();
+            store.commit('internalValue', [1, 4]);
+
+            const result1 = store.selectItem(null);
+            t.deepEqual(store.state.internalValue, [4], 'should keep disabled item in selection');
+            t.is(store.state.status.hasChanged, true);
+            t.is(result1, true, 'should return true if a change occurs');
+
+            store.state.status.hasChanged = false;
+
+            /* With only disabled item in selection */
+            const result2 = store.selectItem(null);
+            t.deepEqual(store.state.internalValue, [4]);
+            t.is(store.state.status.hasChanged, false);
+            t.is(result2, false, 'should return false if no change occurs');
+
+            store.state.status.hasChanged = false;
+
+            /* Assert disabled items can be removed by changing the selection */
+            store.commit('internalValue', [3, 2]);
+            t.deepEqual(store.state.internalValue, [3, 2], 'should remove disabled item');
+
             t.end();
         });
 
@@ -466,30 +525,57 @@ tape.test('selectItem()', (st) => {
 
         sTest.test('should keep only exclusive item', (t) => {
             const store = getStore();
-            store.state.internalValue = [1, 4, 5];
+            store.commit('internalValue', [1, 3, 5]);
 
             const result1 = store.selectItem(6, true);
             t.deepEqual(store.state.internalValue, [6]);
             t.is(store.state.status.hasChanged, true);
-            t.is(result1, true, 'should return if a change occurs');
+            t.is(result1, true, 'should return true if a change occurs');
 
             const result2 = store.selectItem(7, true);
             t.deepEqual(store.state.internalValue, [7]);
             t.is(store.state.status.hasChanged, true);
-            t.is(result2, true, 'should return if a change occurs');
+            t.is(result2, true, 'should return true if a change occurs');
 
             const result3 = store.selectItem(1, true);
             t.deepEqual(store.state.internalValue, [1]);
             t.is(store.state.status.hasChanged, true);
-            t.is(result3, true, 'should return if a change occurs');
+            t.is(result3, true, 'should return true if a change occurs');
 
             const result4 = store.selectItem(5, true);
             t.deepEqual(store.state.internalValue, [1, 5]);
             t.is(store.state.status.hasChanged, true);
-            t.is(result4, true, 'should return if a change occurs');
+            t.is(result4, true, 'should return true if a change occurs');
 
             t.is(store.state.selectionIsExcluded, false);
             t.end();
         });
+
+        sTest.test('should manage exclusive item with disabled item', (t) => {
+            const store = getStore();
+            store.commit('internalValue', [1, 4, 5]);
+
+            const result1 = store.selectItem(6, true);
+            t.deepEqual(store.state.internalValue, [1, 4, 5]);
+            t.is(store.state.status.hasChanged, false);
+            t.is(result1, false, 'should return false if no change occurs');
+
+            /* With exclusive and disabled item selected */
+            store.commit('internalValue', [8]);
+
+            const result2 = store.selectItem(6, true);
+            t.deepEqual(store.state.internalValue, [8]);
+            t.is(store.state.status.hasChanged, false);
+            t.is(result2, false, 'should return false if no change occurs');
+
+            const result3 = store.selectItem(1, true);
+            t.deepEqual(store.state.internalValue, [8]);
+            t.is(store.state.status.hasChanged, false);
+            t.is(result3, false, 'should return false if no change occurs');
+
+            t.is(store.state.selectionIsExcluded, false);
+
+            t.end();
+        });
     });
 });

package/types/ExtendedList.d.ts

@@ -26,7 +26,6 @@ export default class ExtendedList extends Vue<Props> {
     get searching(): boolean;
     get errorMessage(): string;
     get infoMessage(): string;
-    get onKeyDown(): (evt: KeyboardEvent) => void;
     get bestPosition(): 'top' | 'bottom';
     get position(): 'top' | 'bottom';
     get horizontalStyle(): string;
@@ -39,6 +38,7 @@ export default class ExtendedList extends Vue<Props> {
     private getGroup;
     private computeListSize;
     private clickHeaderGroup;
+    private onKeyDown;
     mounted(): void;
     unmounted(): void;
     render(): h.JSX.Element;

package/types/MainInput.d.ts

@@ -6,7 +6,7 @@ export interface Props {
 }
 export default class MainInput extends Vue<Props> {
     $refs: {
-        selectedItems: HTMLDivElement;
+        selectedItems?: HTMLDivElement;
     };
     private store;
     private id;
@@ -14,6 +14,7 @@ export default class MainInput extends Vue<Props> {
     private domObserver;
     get isDisabled(): boolean;
     get hasValue(): boolean;
+    get disabledList(): OptionItem[];
     get displayPlaceholder(): boolean;
     get canBeCleared(): boolean;
     get showClearAll(): boolean;

package/types/index.d.ts

@@ -133,7 +133,7 @@ export declare function changeIcons(icons: PartialIcons, iconFamily?: IconFamily
 export default class Selectic extends Vue<Props> {
     $refs: {
         mainInput: MainInput;
-        extendedList: ExtendedList;
+        extendedList?: ExtendedList;
     };
     value?: SelectedValue;
     selectionIsExcluded: boolean;