selectic 3.3.0 → 3.3.1

package/dist/selectic.common.js

@@ -1456,13 +1456,26 @@ class SelecticStore {
             : false;
         const hasOnlyValidValue = hasValue && !hasDisabledSelected && (Array.isArray(value) ? value.every((val) => this.hasValue(val)) :
             this.hasValue(value));
+        /* Whether at least one option, that is not disabled, is not selected. */
+        const hasAvailableNonSelectedOptions = state.allOptions.some((opt) => {
+            const isOptionSelected = (Array.isArray(selectedOptions)
+                ? selectedOptions.some((selectedOpt) => selectedOpt.id === opt.id)
+                : selectedOptions && selectedOptions.id === opt.id);
+            return !isOptionSelected && !opt.disabled;
+        });
         const isEmpty = nbEnabled === 0;
-        const hasOnlyOneOption = nbEnabled === 1 && hasOnlyValidValue && !state.allowClearSelection;
+        const hasOnlyOneOption = (nbEnabled === 1 && hasOnlyValidValue && !state.allowClearSelection);
+        /* In most cases if `hasOnlyOneOption` is true, we disable selection.
+         * However, if we are not in multi-select mode and if the only option available is not the selected one then
+         * we do not disable selection (to let the user switch from its current disabled selection,
+         * and a valid one).
+         */
+        const cannotSelectAnyOption = hasOnlyOneOption && (Array.isArray(selectedOptions) || !hasAvailableNonSelectedOptions);
         const isExclusiveDisabledItem = Array.isArray(selectedOptions) /* which means "multiple" mode */
             && selectedOptions.length === 1
             && selectedOptions[0].exclusive
             && selectedOptions[0].disabled;
-        if (hasOnlyOneOption || isEmpty || isExclusiveDisabledItem) {
+        if (cannotSelectAnyOption || isEmpty || isExclusiveDisabledItem) {
             if (state.isOpen) {
                 this.setAutomaticClose();
                 this.commit('isOpen', false);

package/dist/selectic.esm.js

@@ -1452,13 +1452,26 @@ class SelecticStore {
             : false;
         const hasOnlyValidValue = hasValue && !hasDisabledSelected && (Array.isArray(value) ? value.every((val) => this.hasValue(val)) :
             this.hasValue(value));
+        /* Whether at least one option, that is not disabled, is not selected. */
+        const hasAvailableNonSelectedOptions = state.allOptions.some((opt) => {
+            const isOptionSelected = (Array.isArray(selectedOptions)
+                ? selectedOptions.some((selectedOpt) => selectedOpt.id === opt.id)
+                : selectedOptions && selectedOptions.id === opt.id);
+            return !isOptionSelected && !opt.disabled;
+        });
         const isEmpty = nbEnabled === 0;
-        const hasOnlyOneOption = nbEnabled === 1 && hasOnlyValidValue && !state.allowClearSelection;
+        const hasOnlyOneOption = (nbEnabled === 1 && hasOnlyValidValue && !state.allowClearSelection);
+        /* In most cases if `hasOnlyOneOption` is true, we disable selection.
+         * However, if we are not in multi-select mode and if the only option available is not the selected one then
+         * we do not disable selection (to let the user switch from its current disabled selection,
+         * and a valid one).
+         */
+        const cannotSelectAnyOption = hasOnlyOneOption && (Array.isArray(selectedOptions) || !hasAvailableNonSelectedOptions);
         const isExclusiveDisabledItem = Array.isArray(selectedOptions) /* which means "multiple" mode */
             && selectedOptions.length === 1
             && selectedOptions[0].exclusive
             && selectedOptions[0].disabled;
-        if (hasOnlyOneOption || isEmpty || isExclusiveDisabledItem) {
+        if (cannotSelectAnyOption || isEmpty || isExclusiveDisabledItem) {
             if (state.isOpen) {
                 this.setAutomaticClose();
                 this.commit('isOpen', false);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "selectic",
-    "version": "3.3.0",
+    "version": "3.3.1",
     "description": "Smart Select for VueJS 3.x",
     "main": "dist/selectic.common.js",
     "module": "dist/selectic.esm.js",
@@ -39,11 +39,11 @@
         "test": "npm run build && tape test/**/*.spec.js"
     },
     "dependencies": {
-        "vtyx": "4.4.2"
+        "vtyx": "4.4.3"
     },
     "devDependencies": {
-        "@babel/types": "^7.28.2",
-        "rollup": "^2.79.2",
+        "@babel/types": "^7.29.0",
+        "rollup": "^2.80.0",
         "rollup-plugin-postcss": "^4.0.2",
         "tape": "^4.17.0",
         "typescript": "~5.9"

package/src/Store.tsx

@@ -1988,14 +1988,37 @@ export default class SelecticStore {
             this.hasValue(value)
         );
 
+        /* Whether at least one option, that is not disabled, is not selected. */
+        const hasAvailableNonSelectedOptions = state.allOptions.some((opt) => {
+            const isOptionSelected = (
+                Array.isArray(selectedOptions)
+                    ? selectedOptions.some((selectedOpt) => selectedOpt.id === opt.id)
+                    : selectedOptions && selectedOptions.id === opt.id
+            );
+
+            return !isOptionSelected && !opt.disabled;
+        });
+
         const isEmpty = nbEnabled === 0;
-        const hasOnlyOneOption = nbEnabled === 1 && hasOnlyValidValue && !state.allowClearSelection;
+        const hasOnlyOneOption = (
+            nbEnabled === 1 && hasOnlyValidValue && !state.allowClearSelection
+        );
+
+        /* In most cases if `hasOnlyOneOption` is true, we disable selection.
+         * However, if we are not in multi-select mode and if the only option available is not the selected one then
+         * we do not disable selection (to let the user switch from its current disabled selection,
+         * and a valid one).
+         */
+        const cannotSelectAnyOption = hasOnlyOneOption && (
+            Array.isArray(selectedOptions) || !hasAvailableNonSelectedOptions
+        );
+
         const isExclusiveDisabledItem = Array.isArray(selectedOptions) /* which means "multiple" mode */
             && selectedOptions.length === 1
             && selectedOptions[0].exclusive
             && selectedOptions[0].disabled;
 
-        if (hasOnlyOneOption || isEmpty || isExclusiveDisabledItem) {
+        if (cannotSelectAnyOption || isEmpty || isExclusiveDisabledItem) {
             if (state.isOpen) {
                 this.setAutomaticClose();
                 this.commit('isOpen', false);

package/test/Store/Store_props.spec.js

@@ -229,6 +229,62 @@ tape.test('change props', (subT) => {
                 t.end();
             });
 
+            sTest.test('should not disable the select, if selected item is disabled but there is another option',
+                async (t) => {
+                    const options = getOptions(2, 'alpha');
+                    options[1].disabled = true;
+
+                    const store = new Store({
+                        value: 1,
+                        options: options,
+                        disabled: false,
+                        params: {
+                            autoDisabled: true,
+                        },
+                    });
+
+                    store.commit('isOpen', true);
+                    await _.nextVueTick(store);
+
+                    t.is(store.state.selectedOptions.text, 'alpha1');
+                    t.is(store.state.internalValue, 1);
+                    t.is(store.state.disabled, false);
+
+                    /* Once we choose the only valid option, disable the selection */
+                    store.props.value = 0;
+                    await _.nextVueTick(store);
+
+                    t.is(store.state.selectedOptions.text, 'alpha0');
+                    t.is(store.state.internalValue, 0);
+                    t.is(store.state.disabled, true);
+
+                    t.end();
+                });
+
+            sTest.test('multi select should not be disabled, even if only disabled options are left',
+                async (t) => {
+                    const options = getOptions(3, 'alpha');
+                    options[1].disabled = true;
+                    options[2].disabled = true;
+
+                    const store = new Store({
+                        value: [0, 1],
+                        options: options,
+                        disabled: false,
+                        params: {
+                            autoDisabled: true,
+                            multiple: true,
+                        },
+                    });
+
+                    store.commit('isOpen', true);
+                    await _.nextVueTick(store);
+
+                    t.deepEqual(store.state.internalValue, [0, 1]);
+                    t.is(store.state.disabled, false);
+                    t.end();
+                });
+
             sTest.test('should not disable the select with an invalid value', async (t) => {
                 const store = new Store({
                     value: 2,