selectic 3.1.2 → 3.1.3

package/dist/selectic.common.js

@@ -32,7 +32,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "/* {{{ Variables */\n\n:root {\n    --selectic-font-size: 14px;\n    --selectic-cursor-disabled: not-allowed;\n\n    /* The main element */\n    --selectic-color: #555555;\n    --selectic-bg: #ffffff;\n\n    /* The main element (when disabled) */\n    --selectic-color-disabled: #787878;\n    --selectic-bg-disabled: #eeeeee;\n\n    /* The list */\n    --selectic-panel-bg: #f0f0f0;\n    --selectic-separator-bordercolor: #cccccc;\n    /* --selectic-item-color: var(--selectic-color); /* Can be set in any CSS configuration */\n\n    /* The current selected item */\n    --selectic-selected-item-color: #428bca;\n\n    /* When mouse is over items or by selecting with key arrows */\n    --selectic-active-item-color: #ffffff;\n    --selectic-active-item-bg: #66afe9;\n\n    /* Selected values in main element */\n    --selectic-value-bg: #f0f0f0;\n    /* --selectic-more-items-bg: var(--selectic-info-bg); /* can be set in any CSS configuration */\n    /* --selectic-more-items-color: var(--selectic-info-color); /* can be set in any CSS configuration */\n    --selectic-more-items-bg-disabled: #cccccc;\n\n    /* Information message */\n    --selectic-info-bg: #5bc0de;\n    --selectic-info-color: #ffffff;\n\n    /* Error message */\n    --selectic-error-bg: #b72c29;\n    --selectic-error-color: #ffffff;\n\n    /* XXX: Currently it is important to keep this size for a correct scroll\n     * height estimation */\n    --selectic-input-height: 30px;\n}\n\n/* }}} */\n/* {{{ Bootstrap equivalent style */\n\n.selectic .form-control {\n    display: block;\n    width: 100%;\n    height: calc(var(--selectic-input-height) - 2px);\n    font-size: var(--selectic-font-size);\n    line-height: 1.42857143;\n    color: var(--selectic-color);\n    background-color: var(--selectic-bg);\n    background-image: none;\n    border: 1px solid var(--selectic-separator-bordercolor); /* should use a better variable */\n    border-radius: 4px;\n    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);\n    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\n}\n.selectic .has-feedback {\n    position: relative;\n}\n.selectic .has-feedback .form-control {\n    padding-right: calc(var(--selectic-input-height) + 4px);\n}\n\n.selectic .form-control-feedback.fa,\n.selectic .form-control-feedback {\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 2;\n    display: block;\n    width: calc(var(--selectic-input-height) + 4px);\n    height: calc(var(--selectic-input-height) + 4px);\n    line-height: var(--selectic-input-height);\n    text-align: center;\n    pointer-events: none;\n}\n\n.selectic .alert-info {\n    background-color: var(--selectic-info-bg);\n    color: var(--selectic-info-color);\n}\n\n.selectic .alert-danger {\n    background-color: var(--selectic-error-bg);\n    color: var(--selectic-error-color);\n}\n\n/* }}} */\n\n.selectic * {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n}\n\n.selectic.form-control {\n    display: inline-block;\n    padding: 0;\n    cursor: pointer;\n    border: unset;\n}\n\n.has-feedback .selectic__icon-container.form-control-feedback {\n    right: 0;\n}\n\n/* The input which contains the selected value\n * XXX: This input should stay hidden behind other elements, but is \"visible\"\n * (in term of DOM point of view) in order to get and to trigger the `focus`\n * DOM event. */\n.selectic__input-value {\n    position: fixed;\n    opacity: 0;\n    z-index: -1000;\n    top: -100px;\n}\n\n/* XXX: .form-control has been added to this selector to improve priority and\n * override some rules of the original .form-control */\n.selectic-input.form-control {\n    display: inline-flex;\n    justify-content: space-between;\n    overflow: hidden;\n    width: 100%;\n    min-height: var(--selectic-input-height);\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-left: 5px;\n    line-height: calc(var(--selectic-input-height) - 4px);\n    color: var(--selectic-color);\n}\n\n.selectic-input__reverse-icon {\n    align-self: center;\n    margin-right: 3px;\n    cursor: default;\n}\n.selectic-input__clear-icon {\n    align-self: center;\n    margin-left: 3px;\n    cursor: pointer;\n}\n.selectic-input__clear-icon:hover {\n    color: var(--selectic-selected-item-color);\n}\n\n.selectic-input.focused {\n    border-bottom-left-radius: 0px;\n    border-bottom-right-radius: 0px;\n}\n\n.selectic-input.disabled {\n    cursor: var(--selectic-cursor-disabled);\n    background-color: var(--selectic-bg-disabled);\n}\n.selectic-input.disabled .more-items {\n\tbackground-color: var(--selectic-more-items-bg-disabled);\n}\n\n.selectic-input__selected-items {\n    display: inline-flex;\n    flex-wrap: nowrap;\n    align-items: center;\n    white-space: nowrap;\n}\n\n.selectic-input__selected-items__placeholder {\n    font-style: italic;\n    opacity: 0.7;\n    white-space: nowrap;\n}\n\n.selectic-icon {\n    color: var(--selectic-color);\n    text-align: center;\n    vertical-align: middle;\n}\n\n.selectic__extended-list {\n    position: fixed;\n    top: var(--top-position, 0);\n    z-index: 2000;\n    height: auto;\n    max-height: var(--availableSpace);\n    background-color: var(--selectic-bg, #ffffff);\n    box-shadow: 2px 5px 12px 0px #888888;\n    border-radius: 0 0 4px 4px;\n    padding: 0;\n    width: var(--list-width, 200px);\n    min-width: 200px;\n    display: grid;\n    grid-template-rows: minmax(0, max-content) 1fr;\n}\n.selectic__extended-list.selectic-position-top {\n    box-shadow: 2px -3px 12px 0px #888888;\n}\n.selectic__extended-list__list-container{\n    overflow: auto;\n}\n.selectic__extended-list__list-items {\n    max-height: calc(var(--selectic-input-height) * 10);\n    min-width: max-content;\n    padding-left: 0;\n}\n\n.selectic-item {\n    display: block;\n    position: relative;\n    box-sizing: border-box;\n    padding: 2px 8px;\n    color: var(--selectic-item-color, var(--selectic-color));\n    min-height: calc(var(--selectic-input-height) - 3px);\n    list-style-type: none;\n    white-space: nowrap;\n    cursor: pointer;\n}\n\n.selectic-item_text {\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n}\n\n.selectic-item:not(.selected) .selectic-item_icon {\n    opacity: 0;\n}\n\n.selectic-item_text {\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n}\n\n.selectic-item__active {\n    background-color: var(--selectic-active-item-bg);\n    color: var(--selectic-active-item-color);\n}\n.selectic-item__active:not(.selected) .selectic-item_icon {\n    opacity: 0.2;\n}\n\n.selectic-item__disabled {\n    color: var(--selectic-color-disabled);\n    background-color: var(--selectic-bg-disabled);\n}\n\n.selectic-item__is-in-group {\n    padding-left: 2em;\n}\n\n.selectic-item__is-group {\n    font-weight: bold;\n    cursor: default;\n}\n\n.selectic-item__is-group.selectable {\n    cursor: pointer;\n}\n\n.selectic-item.selected {\n    color: var(--selectic-selected-item-color);\n}\n.selectic-search-scope {\n    color: #e0e0e0;\n    left: auto;\n    right: 10px;\n}\n.selectic .form-control-feedback.fa.selectic-search-scope {\n    width: calc(var(--selectic-input-height) * 0.75);\n    height: calc(var(--selectic-input-height) * 0.75);\n    line-height: calc(var(--selectic-input-height) * 0.75);\n}\n\n.selectic__message {\n    text-align: center;\n    padding: 3px;\n}\n\n.selectic .filter-panel {\n    padding: 3px;\n    margin-left: 0px;\n    margin-right: 0px;\n    background-color: var(--selectic-panel-bg);\n    border-bottom: 1px solid var(--selectic-separator-bordercolor);\n}\n\n.selectic .panelclosed {\n    max-height: 0px;\n    transition: max-height 0.3s ease-out;\n    overflow: hidden;\n}\n\n.panelopened {\n    max-height: 200px;\n    transition: max-height 0.3s ease-in;\n    overflow: hidden;\n}\n\n.selectic .filter-panel__input {\n    padding-left: 0px;\n    padding-right: 0px;\n    padding-bottom: 10px;\n    margin-bottom: 0px;\n}\n.selectic .filter-input {\n    height: calc(var(--selectic-input-height) * 0.75);\n}\n\n.selectic .checkbox-filter {\n    padding: 5px;\n    text-align: center;\n}\n\n.selectic .curtain-handler {\n    text-align: center;\n}\n\n.selectic .toggle-selectic {\n    margin: 5px;\n    padding-left: 0px;\n    padding-right: 0px;\n}\n\n.selectic .toggle-boolean-select-all-toggle {\n    display: inline;\n    margin-right: 15px;\n}\n\n.selectic .toggle-boolean-excluding-toggle {\n    display: inline;\n    margin-right: 15px;\n}\n\n.selectic .single-value {\n    display: grid;\n    grid-template: \"value icon\" 1fr / max-content max-content;\n\n    padding: 2px;\n    padding-left: 5px;\n    margin-left: 0;\n    margin-right: 5px;\n    /* margin top/bottom are mainly to create a gutter in multilines */\n    margin-top: 2px;\n    margin-bottom: 2px;\n\n    border-radius: 3px;\n    background-color: var(--selectic-value-bg);\n    max-height: calc(var(--selectic-input-height) - 10px);\n    max-width: 100%;\n    min-width: 30px;\n\n    overflow: hidden;\n    white-space: nowrap;\n    line-height: initial;\n    vertical-align: middle;\n}\n\n.selectic .more-items {\n    display: inline-block;\n\n    padding-left: 5px;\n    padding-right: 5px;\n    border-radius: 10px;\n\n    background-color: var(--selectic-more-items-bg, var(--selectic-info-bg));\n    color: var(--selectic-more-items-color, var(--selectic-info-color));\n    cursor: help;\n}\n.selectic-input__selected-items__value {\n    grid-area: value;\n    align-self: center;\n    justify-self: normal;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n}\n\n.selectic-input__selected-items__icon {\n    grid-area: icon;\n    align-self: center;\n    justify-self: center;\n    margin-left: 5px;\n}\n.selectic-input__selected-items__icon:hover {\n    color: var(--selectic-selected-item-color);\n}\n\n.selectic__label-disabled {\n    opacity: 0.5;\n    transition: opacity 400ms;\n}\n\n/* XXX: override padding of bootstrap input-sm.\n * This padding introduce a line shift. */\n.selectic.input-sm {\n    padding: 0;\n}\n\n/* {{{ overflow multiline */\n\n.selectic--overflow-multiline,\n.selectic--overflow-multiline.form-control,\n.selectic--overflow-multiline .form-control {\n    height: unset;\n}\n\n.selectic--overflow-multiline .selectic-input {\n    overflow: unset;\n}\n\n.selectic--overflow-multiline .selectic-input__selected-items {\n    flex-wrap: wrap;\n}\n\n/* {{{ icons */\n\n@keyframes selectic-animation-spin {\n    0% {\n        transform: rotate(0deg);\n    }\n    100% {\n        transform: rotate(359deg);\n    }\n}\n\n.selectic__icon {\n    height: 1em;\n    fill: currentColor;\n}\n\n.selectic-spin {\n    animation: selectic-animation-spin 2s infinite linear;\n}\n\n/* }}} */\n";
+var css_248z = "/* {{{ Variables */\n\n:root {\n    --selectic-font-size: 14px;\n    --selectic-cursor-disabled: not-allowed;\n\n    /* The main element */\n    --selectic-color: #555555;\n    --selectic-bg: #ffffff;\n\n    /* The main element (when disabled) */\n    --selectic-color-disabled: #787878;\n    --selectic-bg-disabled: #eeeeee;\n\n    /* The list */\n    --selectic-panel-bg: #f0f0f0;\n    --selectic-separator-bordercolor: #cccccc;\n    /* --selectic-item-color: var(--selectic-color); /* Can be set in any CSS configuration */\n\n    /* The current selected item */\n    --selectic-selected-item-color: #428bca;\n\n    /* When mouse is over items or by selecting with key arrows */\n    --selectic-active-item-color: #ffffff;\n    --selectic-active-item-bg: #66afe9;\n\n    /* Selected values in main element */\n    --selectic-value-bg: #f0f0f0;\n    /* --selectic-more-items-bg: var(--selectic-info-bg); /* can be set in any CSS configuration */\n    /* --selectic-more-items-color: var(--selectic-info-color); /* can be set in any CSS configuration */\n    --selectic-more-items-bg-disabled: #cccccc;\n\n    /* Information message */\n    --selectic-info-bg: #5bc0de;\n    --selectic-info-color: #ffffff;\n\n    /* Error message */\n    --selectic-error-bg: #b72c29;\n    --selectic-error-color: #ffffff;\n\n    /* XXX: Currently it is important to keep this size for a correct scroll\n     * height estimation */\n    --selectic-input-height: 30px;\n}\n\n/* }}} */\n/* {{{ Bootstrap equivalent style */\n\n.selectic .form-control {\n    display: block;\n    width: 100%;\n    height: calc(var(--selectic-input-height) - 2px);\n    font-size: var(--selectic-font-size);\n    line-height: 1.42857143;\n    color: var(--selectic-color);\n    background-color: var(--selectic-bg);\n    background-image: none;\n    border: 1px solid var(--selectic-separator-bordercolor); /* should use a better variable */\n    border-radius: 4px;\n    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);\n    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\n}\n.selectic .has-feedback {\n    position: relative;\n}\n.selectic .has-feedback .form-control {\n    padding-right: calc(var(--selectic-input-height) + 4px);\n}\n\n.selectic .form-control-feedback.fa,\n.selectic .form-control-feedback {\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 2;\n    display: block;\n    width: calc(var(--selectic-input-height) + 4px);\n    height: calc(var(--selectic-input-height) + 4px);\n    line-height: var(--selectic-input-height);\n    text-align: center;\n    pointer-events: none;\n}\n\n.selectic .alert-info {\n    background-color: var(--selectic-info-bg);\n    color: var(--selectic-info-color);\n}\n\n.selectic .alert-danger {\n    background-color: var(--selectic-error-bg);\n    color: var(--selectic-error-color);\n}\n\n/* }}} */\n\n.selectic * {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n}\n\n.selectic.form-control {\n    display: inline-block;\n    padding: 0;\n    cursor: pointer;\n    border: unset;\n}\n\n.has-feedback .selectic__icon-container.form-control-feedback {\n    right: 0;\n}\n\n/* The input which contains the selected value\n * XXX: This input should stay hidden behind other elements, but is \"visible\"\n * (in term of DOM point of view) in order to get and to trigger the `focus`\n * DOM event. */\n.selectic__input-value {\n    position: fixed;\n    opacity: 0;\n    z-index: -1000;\n    top: -100px;\n}\n\n/* XXX: .form-control has been added to this selector to improve priority and\n * override some rules of the original .form-control */\n.selectic-input.form-control {\n    display: inline-flex;\n    justify-content: space-between;\n    overflow: hidden;\n    width: 100%;\n    min-height: var(--selectic-input-height);\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-left: 5px;\n    line-height: calc(var(--selectic-input-height) - 4px);\n    color: var(--selectic-color);\n}\n\n.selectic-input__reverse-icon {\n    align-self: center;\n    margin-right: 3px;\n    cursor: default;\n}\n.selectic-input__clear-icon {\n    align-self: center;\n    margin-left: 3px;\n    cursor: pointer;\n}\n.selectic-input__clear-icon:hover {\n    color: var(--selectic-selected-item-color);\n}\n\n.selectic-input.focused {\n    border-bottom-left-radius: 0px;\n    border-bottom-right-radius: 0px;\n}\n\n.selectic-input.disabled {\n    cursor: var(--selectic-cursor-disabled);\n    background-color: var(--selectic-bg-disabled);\n}\n.selectic-input.disabled .more-items {\n\tbackground-color: var(--selectic-more-items-bg-disabled);\n}\n\n.selectic-input__selected-items {\n    display: inline-flex;\n    flex-wrap: nowrap;\n    align-items: center;\n    white-space: nowrap;\n}\n\n.selectic-input__selected-items__placeholder {\n    font-style: italic;\n    opacity: 0.7;\n    white-space: nowrap;\n}\n\n.selectic-icon {\n    color: var(--selectic-color);\n    text-align: center;\n    vertical-align: middle;\n}\n\n.selectic__extended-list {\n    position: fixed;\n    top: var(--top-position, 0);\n    z-index: 2000;\n    height: auto;\n    max-height: var(--availableSpace);\n    background-color: var(--selectic-bg, #ffffff);\n    box-shadow: 2px 5px 12px 0px #888888;\n    border-radius: 0 0 4px 4px;\n    padding: 0;\n    width: var(--list-width, 200px);\n    min-width: 200px;\n    display: grid;\n    grid-template-rows: minmax(0, max-content) 1fr;\n}\n.selectic__extended-list.selectic-position-top {\n    box-shadow: 2px -3px 12px 0px #888888;\n}\n.selectic__extended-list__list-container{\n    overflow: auto;\n}\n.selectic__extended-list__list-items {\n    max-height: calc(var(--selectic-input-height) * 10);\n    min-width: max-content;\n    padding-left: 0;\n}\n\n.selectic-item {\n    display: block;\n    position: relative;\n    box-sizing: border-box;\n    padding: 2px 8px;\n    color: var(--selectic-item-color, var(--selectic-color));\n    min-height: calc(var(--selectic-input-height) - 3px);\n    list-style-type: none;\n    white-space: nowrap;\n    cursor: pointer;\n}\n\n.selectic-item_text {\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n}\n\n.selectic-item:not(.selected) .selectic-item_icon {\n    opacity: 0;\n}\n\n.selectic-item_text {\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n}\n\n.selectic-item__active {\n    background-color: var(--selectic-active-item-bg);\n    color: var(--selectic-active-item-color);\n}\n.selectic-item__active:not(.selected) .selectic-item_icon {\n    opacity: 0.2;\n}\n.selectic-item__active.selectic-item__disabled:not(.selected) .selectic-item_icon {\n    opacity: 0;\n}\n\n.selectic-item__disabled {\n    color: var(--selectic-color-disabled);\n    background-color: var(--selectic-bg-disabled);\n}\n\n.selectic-item__is-in-group {\n    padding-left: 2em;\n}\n\n.selectic-item__is-group {\n    font-weight: bold;\n    cursor: default;\n}\n\n.selectic-item__is-group.selectable {\n    cursor: pointer;\n}\n\n.selectic-item.selected {\n    color: var(--selectic-selected-item-color);\n}\n.selectic-search-scope {\n    color: #e0e0e0;\n    left: auto;\n    right: 10px;\n}\n.selectic .form-control-feedback.fa.selectic-search-scope {\n    width: calc(var(--selectic-input-height) * 0.75);\n    height: calc(var(--selectic-input-height) * 0.75);\n    line-height: calc(var(--selectic-input-height) * 0.75);\n}\n\n.selectic__message {\n    text-align: center;\n    padding: 3px;\n}\n\n.selectic .filter-panel {\n    padding: 3px;\n    margin-left: 0px;\n    margin-right: 0px;\n    background-color: var(--selectic-panel-bg);\n    border-bottom: 1px solid var(--selectic-separator-bordercolor);\n}\n\n.selectic .panelclosed {\n    max-height: 0px;\n    transition: max-height 0.3s ease-out;\n    overflow: hidden;\n}\n\n.panelopened {\n    max-height: 200px;\n    transition: max-height 0.3s ease-in;\n    overflow: hidden;\n}\n\n.selectic .filter-panel__input {\n    padding-left: 0px;\n    padding-right: 0px;\n    padding-bottom: 10px;\n    margin-bottom: 0px;\n}\n.selectic .filter-input {\n    height: calc(var(--selectic-input-height) * 0.75);\n}\n\n.selectic .checkbox-filter {\n    padding: 5px;\n    text-align: center;\n}\n\n.selectic .curtain-handler {\n    text-align: center;\n}\n\n.selectic .toggle-selectic {\n    margin: 5px;\n    padding-left: 0px;\n    padding-right: 0px;\n}\n\n.selectic .toggle-boolean-select-all-toggle {\n    display: inline;\n    margin-right: 15px;\n}\n\n.selectic .toggle-boolean-excluding-toggle {\n    display: inline;\n    margin-right: 15px;\n}\n\n.selectic .single-value {\n    display: grid;\n    grid-template: \"value icon\" 1fr / max-content max-content;\n\n    padding: 2px;\n    padding-left: 5px;\n    margin-left: 0;\n    margin-right: 5px;\n    /* margin top/bottom are mainly to create a gutter in multilines */\n    margin-top: 2px;\n    margin-bottom: 2px;\n\n    border-radius: 3px;\n    background-color: var(--selectic-value-bg);\n    max-height: calc(var(--selectic-input-height) - 10px);\n    max-width: 100%;\n    min-width: 30px;\n\n    overflow: hidden;\n    white-space: nowrap;\n    line-height: initial;\n    vertical-align: middle;\n}\n\n.selectic .more-items {\n    display: inline-block;\n\n    padding-left: 5px;\n    padding-right: 5px;\n    border-radius: 10px;\n\n    background-color: var(--selectic-more-items-bg, var(--selectic-info-bg));\n    color: var(--selectic-more-items-color, var(--selectic-info-color));\n    cursor: help;\n}\n.selectic-input__selected-items__value {\n    grid-area: value;\n    align-self: center;\n    justify-self: normal;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n}\n\n.selectic-input__selected-items__icon {\n    grid-area: icon;\n    align-self: center;\n    justify-self: center;\n    margin-left: 5px;\n}\n.selectic-input__selected-items__icon:hover {\n    color: var(--selectic-selected-item-color);\n}\n\n.selectic__label-disabled {\n    opacity: 0.5;\n    transition: opacity 400ms;\n}\n\n/* XXX: override padding of bootstrap input-sm.\n * This padding introduce a line shift. */\n.selectic.input-sm {\n    padding: 0;\n}\n\n/* {{{ overflow multiline */\n\n.selectic--overflow-multiline,\n.selectic--overflow-multiline.form-control,\n.selectic--overflow-multiline .form-control {\n    height: unset;\n}\n\n.selectic--overflow-multiline .selectic-input {\n    overflow: unset;\n}\n\n.selectic--overflow-multiline .selectic-input__selected-items {\n    flex-wrap: wrap;\n}\n\n/* {{{ icons */\n\n@keyframes selectic-animation-spin {\n    0% {\n        transform: rotate(0deg);\n    }\n    100% {\n        transform: rotate(359deg);\n    }\n}\n\n.selectic__icon {\n    height: 1em;\n    fill: currentColor;\n}\n\n.selectic-spin {\n    animation: selectic-animation-spin 2s infinite linear;\n}\n\n/* }}} */\n";
 styleInject(css_248z);
 
 /**
@@ -558,25 +558,54 @@ class SelecticStore {
             if (selected === undefined) {
                 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;
+                }, []);
+                state.internalValue = newSelection;
+                hasChanged = internalValue.length > newSelection.length;
             }
             else if (selected && !isAlreadySelected) {
+                let addItem = true;
                 if (item === null || item === void 0 ? void 0 : 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 === null || selectedItem === void 0 ? void 0 : 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);
@@ -599,6 +628,11 @@ class SelecticStore {
                 if (id !== oldValue) {
                     return hasChanged;
                 }
+                const oldOption = state.selectedOptions;
+                if (oldOption === null || oldOption === void 0 ? void 0 : oldOption.disabled) {
+                    /* old selection is disabled so do not unselect it */
+                    return hasChanged;
+                }
                 id = null;
             }
             else if (id === oldValue) {
@@ -1368,15 +1402,23 @@ class SelecticStore {
         if (doNotCheck || !hasFetchedAllItems) {
             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 && (Array.isArray(value) ? value.every((val) => this.hasValue(val)) :
+        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);
@@ -1796,6 +1838,18 @@ let MainInput = class MainInput extends vtyx.Vue {
             ? Array.isArray(value) && value.length > 0
             : value !== null;
     }
+    get disabledList() {
+        const state = this.store.state;
+        const isMultiple = state.multiple;
+        const value = state.selectedOptions;
+        if (!isMultiple || !value) {
+            return [];
+        }
+        const disabledValues = value.filter((option) => {
+            return option.disabled;
+        });
+        return disabledValues;
+    }
     get displayPlaceholder() {
         const placeholder = this.store.state.placeholder;
         const hasValue = this.hasValue;
@@ -1814,10 +1868,12 @@ let MainInput = class MainInput extends vtyx.Vue {
         const state = this.store.state;
         const isMultiple = state.multiple;
         const value = state.internalValue;
-        const hasOnlyOneValue = Array.isArray(value) && value.length === 1;
+        const nbSelection = (Array.isArray(value) && value.length) || 0;
+        const hasOnlyOneValue = nbSelection === 1;
+        const hasOnlyDisabled = nbSelection <= this.disabledList.length;
         /* Should not display the clear action if there is only one selected
          * item in multiple (as this item has already its remove icon) */
-        return !isMultiple || !hasOnlyOneValue;
+        return !isMultiple || !hasOnlyOneValue || !hasOnlyDisabled;
     }
     get clearedLabel() {
         const isMultiple = this.store.state.multiple;
@@ -1935,6 +1991,9 @@ let MainInput = class MainInput extends vtyx.Vue {
         /* Check if there is enough space to display items like there are
          * currently shown */
         const el = this.$refs.selectedItems;
+        if (!el) {
+            return;
+        }
         const parentEl = el.parentElement;
         if (!document.contains(parentEl)) {
             /* The element is currently not in DOM */
@@ -2033,7 +2092,7 @@ let MainInput = class MainInput extends vtyx.Vue {
                             click: () => this.$emit('item:click', item.id),
                         } },
                         vtyx.h("span", { class: "selectic-input__selected-items__value" }, item.text),
-                        !this.isDisabled && (vtyx.h(Icon$1, { icon: "times", class: "selectic-input__selected-items__icon", store: this.store, on: {
+                        !this.isDisabled && !item.disabled && (vtyx.h(Icon$1, { icon: "times", class: "selectic-input__selected-items__icon", store: this.store, on: {
                                 'click.prevent.stop': () => this.selectItem(item.id),
                             } }))))),
                     this.moreSelectedNb && (vtyx.h("div", { class: "single-value more-items", title: this.moreSelectedTitle }, this.moreSelectedNb)))),
@@ -2787,7 +2846,8 @@ let Selectic = class Selectic extends vtyx.Vue {
             const store = this.store;
             const keepOpenWithOtherSelectic = this.params.keepOpenWithOtherSelectic;
             const extendedList = this.$refs.extendedList;
-            if (!extendedList) {
+            const extendedListEl = extendedList === null || extendedList === void 0 ? void 0 : extendedList.$el;
+            if (!extendedListEl) {
                 /* this component is not focused anymore */
                 if (!keepOpenWithOtherSelectic) {
                     this.removeListeners();
@@ -2796,7 +2856,7 @@ let Selectic = class Selectic extends vtyx.Vue {
                 return;
             }
             const target = evt.target;
-            if (!extendedList.$el.contains(target) && !this.$el.contains(target)) {
+            if (!extendedListEl.contains(target) && !this.$el.contains(target)) {
                 store.commit('isOpen', false);
             }
         };
@@ -2889,14 +2949,23 @@ let Selectic = class Selectic extends vtyx.Vue {
     /* }}} */
     /* {{{ private methods */
     computeWidth() {
-        const el = this.$refs.mainInput.$el;
-        this.width = el.offsetWidth;
+        var _a;
+        const mainInput = (_a = this.$refs) === null || _a === void 0 ? void 0 : _a.mainInput;
+        const mainEl = mainInput === null || mainInput === void 0 ? void 0 : mainInput.$el;
+        if (!mainEl) {
+            /* This method has been called too soon (before render function)
+             * or too late (after unmount) */
+            return;
+        }
+        this.width = mainEl.offsetWidth;
     }
     computeOffset(doNotAddListener = false) {
-        const mainInput = this.$refs.mainInput;
+        var _a;
+        const mainInput = (_a = this.$refs) === null || _a === void 0 ? void 0 : _a.mainInput;
         const mainEl = mainInput === null || mainInput === void 0 ? void 0 : 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;
         }
         const _elementsListeners = this._elementsListeners;
@@ -3030,13 +3099,14 @@ let Selectic = class Selectic extends vtyx.Vue {
     checkFocus() {
         /* Await that focused element becomes active */
         setTimeout(() => {
+            var _a;
             const focusedEl = document.activeElement;
-            const extendedList = this.$refs.extendedList;
+            const extendedList = (_a = this.$refs) === null || _a === void 0 ? void 0 : _a.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 === null || extendedList === void 0 ? void 0 : extendedList.$el.contains(focusedEl))) {
                 return;
             }
             this.store.commit('isOpen', false);

package/dist/selectic.esm.js

@@ -28,7 +28,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "/* {{{ Variables */\n\n:root {\n    --selectic-font-size: 14px;\n    --selectic-cursor-disabled: not-allowed;\n\n    /* The main element */\n    --selectic-color: #555555;\n    --selectic-bg: #ffffff;\n\n    /* The main element (when disabled) */\n    --selectic-color-disabled: #787878;\n    --selectic-bg-disabled: #eeeeee;\n\n    /* The list */\n    --selectic-panel-bg: #f0f0f0;\n    --selectic-separator-bordercolor: #cccccc;\n    /* --selectic-item-color: var(--selectic-color); /* Can be set in any CSS configuration */\n\n    /* The current selected item */\n    --selectic-selected-item-color: #428bca;\n\n    /* When mouse is over items or by selecting with key arrows */\n    --selectic-active-item-color: #ffffff;\n    --selectic-active-item-bg: #66afe9;\n\n    /* Selected values in main element */\n    --selectic-value-bg: #f0f0f0;\n    /* --selectic-more-items-bg: var(--selectic-info-bg); /* can be set in any CSS configuration */\n    /* --selectic-more-items-color: var(--selectic-info-color); /* can be set in any CSS configuration */\n    --selectic-more-items-bg-disabled: #cccccc;\n\n    /* Information message */\n    --selectic-info-bg: #5bc0de;\n    --selectic-info-color: #ffffff;\n\n    /* Error message */\n    --selectic-error-bg: #b72c29;\n    --selectic-error-color: #ffffff;\n\n    /* XXX: Currently it is important to keep this size for a correct scroll\n     * height estimation */\n    --selectic-input-height: 30px;\n}\n\n/* }}} */\n/* {{{ Bootstrap equivalent style */\n\n.selectic .form-control {\n    display: block;\n    width: 100%;\n    height: calc(var(--selectic-input-height) - 2px);\n    font-size: var(--selectic-font-size);\n    line-height: 1.42857143;\n    color: var(--selectic-color);\n    background-color: var(--selectic-bg);\n    background-image: none;\n    border: 1px solid var(--selectic-separator-bordercolor); /* should use a better variable */\n    border-radius: 4px;\n    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);\n    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\n}\n.selectic .has-feedback {\n    position: relative;\n}\n.selectic .has-feedback .form-control {\n    padding-right: calc(var(--selectic-input-height) + 4px);\n}\n\n.selectic .form-control-feedback.fa,\n.selectic .form-control-feedback {\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 2;\n    display: block;\n    width: calc(var(--selectic-input-height) + 4px);\n    height: calc(var(--selectic-input-height) + 4px);\n    line-height: var(--selectic-input-height);\n    text-align: center;\n    pointer-events: none;\n}\n\n.selectic .alert-info {\n    background-color: var(--selectic-info-bg);\n    color: var(--selectic-info-color);\n}\n\n.selectic .alert-danger {\n    background-color: var(--selectic-error-bg);\n    color: var(--selectic-error-color);\n}\n\n/* }}} */\n\n.selectic * {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n}\n\n.selectic.form-control {\n    display: inline-block;\n    padding: 0;\n    cursor: pointer;\n    border: unset;\n}\n\n.has-feedback .selectic__icon-container.form-control-feedback {\n    right: 0;\n}\n\n/* The input which contains the selected value\n * XXX: This input should stay hidden behind other elements, but is \"visible\"\n * (in term of DOM point of view) in order to get and to trigger the `focus`\n * DOM event. */\n.selectic__input-value {\n    position: fixed;\n    opacity: 0;\n    z-index: -1000;\n    top: -100px;\n}\n\n/* XXX: .form-control has been added to this selector to improve priority and\n * override some rules of the original .form-control */\n.selectic-input.form-control {\n    display: inline-flex;\n    justify-content: space-between;\n    overflow: hidden;\n    width: 100%;\n    min-height: var(--selectic-input-height);\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-left: 5px;\n    line-height: calc(var(--selectic-input-height) - 4px);\n    color: var(--selectic-color);\n}\n\n.selectic-input__reverse-icon {\n    align-self: center;\n    margin-right: 3px;\n    cursor: default;\n}\n.selectic-input__clear-icon {\n    align-self: center;\n    margin-left: 3px;\n    cursor: pointer;\n}\n.selectic-input__clear-icon:hover {\n    color: var(--selectic-selected-item-color);\n}\n\n.selectic-input.focused {\n    border-bottom-left-radius: 0px;\n    border-bottom-right-radius: 0px;\n}\n\n.selectic-input.disabled {\n    cursor: var(--selectic-cursor-disabled);\n    background-color: var(--selectic-bg-disabled);\n}\n.selectic-input.disabled .more-items {\n\tbackground-color: var(--selectic-more-items-bg-disabled);\n}\n\n.selectic-input__selected-items {\n    display: inline-flex;\n    flex-wrap: nowrap;\n    align-items: center;\n    white-space: nowrap;\n}\n\n.selectic-input__selected-items__placeholder {\n    font-style: italic;\n    opacity: 0.7;\n    white-space: nowrap;\n}\n\n.selectic-icon {\n    color: var(--selectic-color);\n    text-align: center;\n    vertical-align: middle;\n}\n\n.selectic__extended-list {\n    position: fixed;\n    top: var(--top-position, 0);\n    z-index: 2000;\n    height: auto;\n    max-height: var(--availableSpace);\n    background-color: var(--selectic-bg, #ffffff);\n    box-shadow: 2px 5px 12px 0px #888888;\n    border-radius: 0 0 4px 4px;\n    padding: 0;\n    width: var(--list-width, 200px);\n    min-width: 200px;\n    display: grid;\n    grid-template-rows: minmax(0, max-content) 1fr;\n}\n.selectic__extended-list.selectic-position-top {\n    box-shadow: 2px -3px 12px 0px #888888;\n}\n.selectic__extended-list__list-container{\n    overflow: auto;\n}\n.selectic__extended-list__list-items {\n    max-height: calc(var(--selectic-input-height) * 10);\n    min-width: max-content;\n    padding-left: 0;\n}\n\n.selectic-item {\n    display: block;\n    position: relative;\n    box-sizing: border-box;\n    padding: 2px 8px;\n    color: var(--selectic-item-color, var(--selectic-color));\n    min-height: calc(var(--selectic-input-height) - 3px);\n    list-style-type: none;\n    white-space: nowrap;\n    cursor: pointer;\n}\n\n.selectic-item_text {\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n}\n\n.selectic-item:not(.selected) .selectic-item_icon {\n    opacity: 0;\n}\n\n.selectic-item_text {\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n}\n\n.selectic-item__active {\n    background-color: var(--selectic-active-item-bg);\n    color: var(--selectic-active-item-color);\n}\n.selectic-item__active:not(.selected) .selectic-item_icon {\n    opacity: 0.2;\n}\n\n.selectic-item__disabled {\n    color: var(--selectic-color-disabled);\n    background-color: var(--selectic-bg-disabled);\n}\n\n.selectic-item__is-in-group {\n    padding-left: 2em;\n}\n\n.selectic-item__is-group {\n    font-weight: bold;\n    cursor: default;\n}\n\n.selectic-item__is-group.selectable {\n    cursor: pointer;\n}\n\n.selectic-item.selected {\n    color: var(--selectic-selected-item-color);\n}\n.selectic-search-scope {\n    color: #e0e0e0;\n    left: auto;\n    right: 10px;\n}\n.selectic .form-control-feedback.fa.selectic-search-scope {\n    width: calc(var(--selectic-input-height) * 0.75);\n    height: calc(var(--selectic-input-height) * 0.75);\n    line-height: calc(var(--selectic-input-height) * 0.75);\n}\n\n.selectic__message {\n    text-align: center;\n    padding: 3px;\n}\n\n.selectic .filter-panel {\n    padding: 3px;\n    margin-left: 0px;\n    margin-right: 0px;\n    background-color: var(--selectic-panel-bg);\n    border-bottom: 1px solid var(--selectic-separator-bordercolor);\n}\n\n.selectic .panelclosed {\n    max-height: 0px;\n    transition: max-height 0.3s ease-out;\n    overflow: hidden;\n}\n\n.panelopened {\n    max-height: 200px;\n    transition: max-height 0.3s ease-in;\n    overflow: hidden;\n}\n\n.selectic .filter-panel__input {\n    padding-left: 0px;\n    padding-right: 0px;\n    padding-bottom: 10px;\n    margin-bottom: 0px;\n}\n.selectic .filter-input {\n    height: calc(var(--selectic-input-height) * 0.75);\n}\n\n.selectic .checkbox-filter {\n    padding: 5px;\n    text-align: center;\n}\n\n.selectic .curtain-handler {\n    text-align: center;\n}\n\n.selectic .toggle-selectic {\n    margin: 5px;\n    padding-left: 0px;\n    padding-right: 0px;\n}\n\n.selectic .toggle-boolean-select-all-toggle {\n    display: inline;\n    margin-right: 15px;\n}\n\n.selectic .toggle-boolean-excluding-toggle {\n    display: inline;\n    margin-right: 15px;\n}\n\n.selectic .single-value {\n    display: grid;\n    grid-template: \"value icon\" 1fr / max-content max-content;\n\n    padding: 2px;\n    padding-left: 5px;\n    margin-left: 0;\n    margin-right: 5px;\n    /* margin top/bottom are mainly to create a gutter in multilines */\n    margin-top: 2px;\n    margin-bottom: 2px;\n\n    border-radius: 3px;\n    background-color: var(--selectic-value-bg);\n    max-height: calc(var(--selectic-input-height) - 10px);\n    max-width: 100%;\n    min-width: 30px;\n\n    overflow: hidden;\n    white-space: nowrap;\n    line-height: initial;\n    vertical-align: middle;\n}\n\n.selectic .more-items {\n    display: inline-block;\n\n    padding-left: 5px;\n    padding-right: 5px;\n    border-radius: 10px;\n\n    background-color: var(--selectic-more-items-bg, var(--selectic-info-bg));\n    color: var(--selectic-more-items-color, var(--selectic-info-color));\n    cursor: help;\n}\n.selectic-input__selected-items__value {\n    grid-area: value;\n    align-self: center;\n    justify-self: normal;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n}\n\n.selectic-input__selected-items__icon {\n    grid-area: icon;\n    align-self: center;\n    justify-self: center;\n    margin-left: 5px;\n}\n.selectic-input__selected-items__icon:hover {\n    color: var(--selectic-selected-item-color);\n}\n\n.selectic__label-disabled {\n    opacity: 0.5;\n    transition: opacity 400ms;\n}\n\n/* XXX: override padding of bootstrap input-sm.\n * This padding introduce a line shift. */\n.selectic.input-sm {\n    padding: 0;\n}\n\n/* {{{ overflow multiline */\n\n.selectic--overflow-multiline,\n.selectic--overflow-multiline.form-control,\n.selectic--overflow-multiline .form-control {\n    height: unset;\n}\n\n.selectic--overflow-multiline .selectic-input {\n    overflow: unset;\n}\n\n.selectic--overflow-multiline .selectic-input__selected-items {\n    flex-wrap: wrap;\n}\n\n/* {{{ icons */\n\n@keyframes selectic-animation-spin {\n    0% {\n        transform: rotate(0deg);\n    }\n    100% {\n        transform: rotate(359deg);\n    }\n}\n\n.selectic__icon {\n    height: 1em;\n    fill: currentColor;\n}\n\n.selectic-spin {\n    animation: selectic-animation-spin 2s infinite linear;\n}\n\n/* }}} */\n";
+var css_248z = "/* {{{ Variables */\n\n:root {\n    --selectic-font-size: 14px;\n    --selectic-cursor-disabled: not-allowed;\n\n    /* The main element */\n    --selectic-color: #555555;\n    --selectic-bg: #ffffff;\n\n    /* The main element (when disabled) */\n    --selectic-color-disabled: #787878;\n    --selectic-bg-disabled: #eeeeee;\n\n    /* The list */\n    --selectic-panel-bg: #f0f0f0;\n    --selectic-separator-bordercolor: #cccccc;\n    /* --selectic-item-color: var(--selectic-color); /* Can be set in any CSS configuration */\n\n    /* The current selected item */\n    --selectic-selected-item-color: #428bca;\n\n    /* When mouse is over items or by selecting with key arrows */\n    --selectic-active-item-color: #ffffff;\n    --selectic-active-item-bg: #66afe9;\n\n    /* Selected values in main element */\n    --selectic-value-bg: #f0f0f0;\n    /* --selectic-more-items-bg: var(--selectic-info-bg); /* can be set in any CSS configuration */\n    /* --selectic-more-items-color: var(--selectic-info-color); /* can be set in any CSS configuration */\n    --selectic-more-items-bg-disabled: #cccccc;\n\n    /* Information message */\n    --selectic-info-bg: #5bc0de;\n    --selectic-info-color: #ffffff;\n\n    /* Error message */\n    --selectic-error-bg: #b72c29;\n    --selectic-error-color: #ffffff;\n\n    /* XXX: Currently it is important to keep this size for a correct scroll\n     * height estimation */\n    --selectic-input-height: 30px;\n}\n\n/* }}} */\n/* {{{ Bootstrap equivalent style */\n\n.selectic .form-control {\n    display: block;\n    width: 100%;\n    height: calc(var(--selectic-input-height) - 2px);\n    font-size: var(--selectic-font-size);\n    line-height: 1.42857143;\n    color: var(--selectic-color);\n    background-color: var(--selectic-bg);\n    background-image: none;\n    border: 1px solid var(--selectic-separator-bordercolor); /* should use a better variable */\n    border-radius: 4px;\n    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);\n    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\n}\n.selectic .has-feedback {\n    position: relative;\n}\n.selectic .has-feedback .form-control {\n    padding-right: calc(var(--selectic-input-height) + 4px);\n}\n\n.selectic .form-control-feedback.fa,\n.selectic .form-control-feedback {\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 2;\n    display: block;\n    width: calc(var(--selectic-input-height) + 4px);\n    height: calc(var(--selectic-input-height) + 4px);\n    line-height: var(--selectic-input-height);\n    text-align: center;\n    pointer-events: none;\n}\n\n.selectic .alert-info {\n    background-color: var(--selectic-info-bg);\n    color: var(--selectic-info-color);\n}\n\n.selectic .alert-danger {\n    background-color: var(--selectic-error-bg);\n    color: var(--selectic-error-color);\n}\n\n/* }}} */\n\n.selectic * {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n}\n\n.selectic.form-control {\n    display: inline-block;\n    padding: 0;\n    cursor: pointer;\n    border: unset;\n}\n\n.has-feedback .selectic__icon-container.form-control-feedback {\n    right: 0;\n}\n\n/* The input which contains the selected value\n * XXX: This input should stay hidden behind other elements, but is \"visible\"\n * (in term of DOM point of view) in order to get and to trigger the `focus`\n * DOM event. */\n.selectic__input-value {\n    position: fixed;\n    opacity: 0;\n    z-index: -1000;\n    top: -100px;\n}\n\n/* XXX: .form-control has been added to this selector to improve priority and\n * override some rules of the original .form-control */\n.selectic-input.form-control {\n    display: inline-flex;\n    justify-content: space-between;\n    overflow: hidden;\n    width: 100%;\n    min-height: var(--selectic-input-height);\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-left: 5px;\n    line-height: calc(var(--selectic-input-height) - 4px);\n    color: var(--selectic-color);\n}\n\n.selectic-input__reverse-icon {\n    align-self: center;\n    margin-right: 3px;\n    cursor: default;\n}\n.selectic-input__clear-icon {\n    align-self: center;\n    margin-left: 3px;\n    cursor: pointer;\n}\n.selectic-input__clear-icon:hover {\n    color: var(--selectic-selected-item-color);\n}\n\n.selectic-input.focused {\n    border-bottom-left-radius: 0px;\n    border-bottom-right-radius: 0px;\n}\n\n.selectic-input.disabled {\n    cursor: var(--selectic-cursor-disabled);\n    background-color: var(--selectic-bg-disabled);\n}\n.selectic-input.disabled .more-items {\n\tbackground-color: var(--selectic-more-items-bg-disabled);\n}\n\n.selectic-input__selected-items {\n    display: inline-flex;\n    flex-wrap: nowrap;\n    align-items: center;\n    white-space: nowrap;\n}\n\n.selectic-input__selected-items__placeholder {\n    font-style: italic;\n    opacity: 0.7;\n    white-space: nowrap;\n}\n\n.selectic-icon {\n    color: var(--selectic-color);\n    text-align: center;\n    vertical-align: middle;\n}\n\n.selectic__extended-list {\n    position: fixed;\n    top: var(--top-position, 0);\n    z-index: 2000;\n    height: auto;\n    max-height: var(--availableSpace);\n    background-color: var(--selectic-bg, #ffffff);\n    box-shadow: 2px 5px 12px 0px #888888;\n    border-radius: 0 0 4px 4px;\n    padding: 0;\n    width: var(--list-width, 200px);\n    min-width: 200px;\n    display: grid;\n    grid-template-rows: minmax(0, max-content) 1fr;\n}\n.selectic__extended-list.selectic-position-top {\n    box-shadow: 2px -3px 12px 0px #888888;\n}\n.selectic__extended-list__list-container{\n    overflow: auto;\n}\n.selectic__extended-list__list-items {\n    max-height: calc(var(--selectic-input-height) * 10);\n    min-width: max-content;\n    padding-left: 0;\n}\n\n.selectic-item {\n    display: block;\n    position: relative;\n    box-sizing: border-box;\n    padding: 2px 8px;\n    color: var(--selectic-item-color, var(--selectic-color));\n    min-height: calc(var(--selectic-input-height) - 3px);\n    list-style-type: none;\n    white-space: nowrap;\n    cursor: pointer;\n}\n\n.selectic-item_text {\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n}\n\n.selectic-item:not(.selected) .selectic-item_icon {\n    opacity: 0;\n}\n\n.selectic-item_text {\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n}\n\n.selectic-item__active {\n    background-color: var(--selectic-active-item-bg);\n    color: var(--selectic-active-item-color);\n}\n.selectic-item__active:not(.selected) .selectic-item_icon {\n    opacity: 0.2;\n}\n.selectic-item__active.selectic-item__disabled:not(.selected) .selectic-item_icon {\n    opacity: 0;\n}\n\n.selectic-item__disabled {\n    color: var(--selectic-color-disabled);\n    background-color: var(--selectic-bg-disabled);\n}\n\n.selectic-item__is-in-group {\n    padding-left: 2em;\n}\n\n.selectic-item__is-group {\n    font-weight: bold;\n    cursor: default;\n}\n\n.selectic-item__is-group.selectable {\n    cursor: pointer;\n}\n\n.selectic-item.selected {\n    color: var(--selectic-selected-item-color);\n}\n.selectic-search-scope {\n    color: #e0e0e0;\n    left: auto;\n    right: 10px;\n}\n.selectic .form-control-feedback.fa.selectic-search-scope {\n    width: calc(var(--selectic-input-height) * 0.75);\n    height: calc(var(--selectic-input-height) * 0.75);\n    line-height: calc(var(--selectic-input-height) * 0.75);\n}\n\n.selectic__message {\n    text-align: center;\n    padding: 3px;\n}\n\n.selectic .filter-panel {\n    padding: 3px;\n    margin-left: 0px;\n    margin-right: 0px;\n    background-color: var(--selectic-panel-bg);\n    border-bottom: 1px solid var(--selectic-separator-bordercolor);\n}\n\n.selectic .panelclosed {\n    max-height: 0px;\n    transition: max-height 0.3s ease-out;\n    overflow: hidden;\n}\n\n.panelopened {\n    max-height: 200px;\n    transition: max-height 0.3s ease-in;\n    overflow: hidden;\n}\n\n.selectic .filter-panel__input {\n    padding-left: 0px;\n    padding-right: 0px;\n    padding-bottom: 10px;\n    margin-bottom: 0px;\n}\n.selectic .filter-input {\n    height: calc(var(--selectic-input-height) * 0.75);\n}\n\n.selectic .checkbox-filter {\n    padding: 5px;\n    text-align: center;\n}\n\n.selectic .curtain-handler {\n    text-align: center;\n}\n\n.selectic .toggle-selectic {\n    margin: 5px;\n    padding-left: 0px;\n    padding-right: 0px;\n}\n\n.selectic .toggle-boolean-select-all-toggle {\n    display: inline;\n    margin-right: 15px;\n}\n\n.selectic .toggle-boolean-excluding-toggle {\n    display: inline;\n    margin-right: 15px;\n}\n\n.selectic .single-value {\n    display: grid;\n    grid-template: \"value icon\" 1fr / max-content max-content;\n\n    padding: 2px;\n    padding-left: 5px;\n    margin-left: 0;\n    margin-right: 5px;\n    /* margin top/bottom are mainly to create a gutter in multilines */\n    margin-top: 2px;\n    margin-bottom: 2px;\n\n    border-radius: 3px;\n    background-color: var(--selectic-value-bg);\n    max-height: calc(var(--selectic-input-height) - 10px);\n    max-width: 100%;\n    min-width: 30px;\n\n    overflow: hidden;\n    white-space: nowrap;\n    line-height: initial;\n    vertical-align: middle;\n}\n\n.selectic .more-items {\n    display: inline-block;\n\n    padding-left: 5px;\n    padding-right: 5px;\n    border-radius: 10px;\n\n    background-color: var(--selectic-more-items-bg, var(--selectic-info-bg));\n    color: var(--selectic-more-items-color, var(--selectic-info-color));\n    cursor: help;\n}\n.selectic-input__selected-items__value {\n    grid-area: value;\n    align-self: center;\n    justify-self: normal;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n}\n\n.selectic-input__selected-items__icon {\n    grid-area: icon;\n    align-self: center;\n    justify-self: center;\n    margin-left: 5px;\n}\n.selectic-input__selected-items__icon:hover {\n    color: var(--selectic-selected-item-color);\n}\n\n.selectic__label-disabled {\n    opacity: 0.5;\n    transition: opacity 400ms;\n}\n\n/* XXX: override padding of bootstrap input-sm.\n * This padding introduce a line shift. */\n.selectic.input-sm {\n    padding: 0;\n}\n\n/* {{{ overflow multiline */\n\n.selectic--overflow-multiline,\n.selectic--overflow-multiline.form-control,\n.selectic--overflow-multiline .form-control {\n    height: unset;\n}\n\n.selectic--overflow-multiline .selectic-input {\n    overflow: unset;\n}\n\n.selectic--overflow-multiline .selectic-input__selected-items {\n    flex-wrap: wrap;\n}\n\n/* {{{ icons */\n\n@keyframes selectic-animation-spin {\n    0% {\n        transform: rotate(0deg);\n    }\n    100% {\n        transform: rotate(359deg);\n    }\n}\n\n.selectic__icon {\n    height: 1em;\n    fill: currentColor;\n}\n\n.selectic-spin {\n    animation: selectic-animation-spin 2s infinite linear;\n}\n\n/* }}} */\n";
 styleInject(css_248z);
 
 /**
@@ -554,25 +554,54 @@ class SelecticStore {
             if (selected === undefined) {
                 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;
+                }, []);
+                state.internalValue = newSelection;
+                hasChanged = internalValue.length > newSelection.length;
             }
             else if (selected && !isAlreadySelected) {
+                let addItem = true;
                 if (item === null || item === void 0 ? void 0 : 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 === null || selectedItem === void 0 ? void 0 : 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);
@@ -595,6 +624,11 @@ class SelecticStore {
                 if (id !== oldValue) {
                     return hasChanged;
                 }
+                const oldOption = state.selectedOptions;
+                if (oldOption === null || oldOption === void 0 ? void 0 : oldOption.disabled) {
+                    /* old selection is disabled so do not unselect it */
+                    return hasChanged;
+                }
                 id = null;
             }
             else if (id === oldValue) {
@@ -1364,15 +1398,23 @@ class SelecticStore {
         if (doNotCheck || !hasFetchedAllItems) {
             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 && (Array.isArray(value) ? value.every((val) => this.hasValue(val)) :
+        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);
@@ -1792,6 +1834,18 @@ let MainInput = class MainInput extends Vue {
             ? Array.isArray(value) && value.length > 0
             : value !== null;
     }
+    get disabledList() {
+        const state = this.store.state;
+        const isMultiple = state.multiple;
+        const value = state.selectedOptions;
+        if (!isMultiple || !value) {
+            return [];
+        }
+        const disabledValues = value.filter((option) => {
+            return option.disabled;
+        });
+        return disabledValues;
+    }
     get displayPlaceholder() {
         const placeholder = this.store.state.placeholder;
         const hasValue = this.hasValue;
@@ -1810,10 +1864,12 @@ let MainInput = class MainInput extends Vue {
         const state = this.store.state;
         const isMultiple = state.multiple;
         const value = state.internalValue;
-        const hasOnlyOneValue = Array.isArray(value) && value.length === 1;
+        const nbSelection = (Array.isArray(value) && value.length) || 0;
+        const hasOnlyOneValue = nbSelection === 1;
+        const hasOnlyDisabled = nbSelection <= this.disabledList.length;
         /* Should not display the clear action if there is only one selected
          * item in multiple (as this item has already its remove icon) */
-        return !isMultiple || !hasOnlyOneValue;
+        return !isMultiple || !hasOnlyOneValue || !hasOnlyDisabled;
     }
     get clearedLabel() {
         const isMultiple = this.store.state.multiple;
@@ -1931,6 +1987,9 @@ let MainInput = class MainInput extends Vue {
         /* Check if there is enough space to display items like there are
          * currently shown */
         const el = this.$refs.selectedItems;
+        if (!el) {
+            return;
+        }
         const parentEl = el.parentElement;
         if (!document.contains(parentEl)) {
             /* The element is currently not in DOM */
@@ -2029,7 +2088,7 @@ let MainInput = class MainInput extends Vue {
                             click: () => this.$emit('item:click', item.id),
                         } },
                         h("span", { class: "selectic-input__selected-items__value" }, item.text),
-                        !this.isDisabled && (h(Icon$1, { icon: "times", class: "selectic-input__selected-items__icon", store: this.store, on: {
+                        !this.isDisabled && !item.disabled && (h(Icon$1, { icon: "times", class: "selectic-input__selected-items__icon", store: this.store, on: {
                                 'click.prevent.stop': () => this.selectItem(item.id),
                             } }))))),
                     this.moreSelectedNb && (h("div", { class: "single-value more-items", title: this.moreSelectedTitle }, this.moreSelectedNb)))),
@@ -2783,7 +2842,8 @@ let Selectic = class Selectic extends Vue {
             const store = this.store;
             const keepOpenWithOtherSelectic = this.params.keepOpenWithOtherSelectic;
             const extendedList = this.$refs.extendedList;
-            if (!extendedList) {
+            const extendedListEl = extendedList === null || extendedList === void 0 ? void 0 : extendedList.$el;
+            if (!extendedListEl) {
                 /* this component is not focused anymore */
                 if (!keepOpenWithOtherSelectic) {
                     this.removeListeners();
@@ -2792,7 +2852,7 @@ let Selectic = class Selectic extends Vue {
                 return;
             }
             const target = evt.target;
-            if (!extendedList.$el.contains(target) && !this.$el.contains(target)) {
+            if (!extendedListEl.contains(target) && !this.$el.contains(target)) {
                 store.commit('isOpen', false);
             }
         };
@@ -2885,14 +2945,23 @@ let Selectic = class Selectic extends Vue {
     /* }}} */
     /* {{{ private methods */
     computeWidth() {
-        const el = this.$refs.mainInput.$el;
-        this.width = el.offsetWidth;
+        var _a;
+        const mainInput = (_a = this.$refs) === null || _a === void 0 ? void 0 : _a.mainInput;
+        const mainEl = mainInput === null || mainInput === void 0 ? void 0 : mainInput.$el;
+        if (!mainEl) {
+            /* This method has been called too soon (before render function)
+             * or too late (after unmount) */
+            return;
+        }
+        this.width = mainEl.offsetWidth;
     }
     computeOffset(doNotAddListener = false) {
-        const mainInput = this.$refs.mainInput;
+        var _a;
+        const mainInput = (_a = this.$refs) === null || _a === void 0 ? void 0 : _a.mainInput;
         const mainEl = mainInput === null || mainInput === void 0 ? void 0 : 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;
         }
         const _elementsListeners = this._elementsListeners;
@@ -3026,13 +3095,14 @@ let Selectic = class Selectic extends Vue {
     checkFocus() {
         /* Await that focused element becomes active */
         setTimeout(() => {
+            var _a;
             const focusedEl = document.activeElement;
-            const extendedList = this.$refs.extendedList;
+            const extendedList = (_a = this.$refs) === null || _a === void 0 ? void 0 : _a.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 === null || extendedList === void 0 ? void 0 : extendedList.$el.contains(focusedEl))) {
                 return;
             }
             this.store.commit('isOpen', false);

package/doc/list.md

@@ -28,12 +28,13 @@ It is possible to define the `option` more precisely.
 * **text** {`string`} _(mandatory)_: The text which is displayed to select the option or when it is selected.
 * **title** {`string`}: Text displayed in `title` when cursor is over the option (default: `''`).
 * **disabled** {`boolean`}: if `true`, this option cannot be selected (default: `false`).
+In "multiple" mode, if the option is already selected, it cannot be removed from selection (it can always be removed by changing `value` of the component).
 * **className** {`string`}: `class` that are applied on the option (default: `''`).
 * **style** {`string`}: css style which are applied on the option (default: `''`).
 * **icon** {`string`}: class names which are applied on a `<span>` before text in the option to display an icon (default: `''`).
 * **options** {`options[]`}: an other list of options. The current option is considered as a group (equivalent of `optgroup`) (default: `undefined`).
 * **group** {`string | number`}: If set, the option is part of the given group. This property is needed only in dynamic mode if the option is part of an optgroup (default: `null`).
-* **exclusive** {`boolean`}: If set to `true`, in multiple mode, this option will be the only one selected. It means that it clears the previous selected options, and if another option is selected, this option is no more selected.
+* **exclusive** {`boolean`}: If set to `true`, in "multiple" mode, this option will be the only one selected. It means that it clears the previous selected options, and if another option is selected, this option is no more selected.
 * **data** {`any`}: You can store any information here, it will be provided when getting selected options. _It is not used by selectic so it can be anything you want_ (default: `undefined`).
 
 ```javascript

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "selectic",
-    "version": "3.1.2",
+    "version": "3.1.3",
     "description": "Smart Select for VueJS 3.x",
     "main": "dist/selectic.common.js",
     "module": "dist/selectic.esm.js",
@@ -17,6 +17,7 @@
     "homepage": "https://github.com/intersec/selectic#readme",
     "keywords": [
         "select",
+        "selectic",
         "multiselect",
         "multi-select",
         "multi-select",

package/src/MainInput.tsx

@@ -17,7 +17,7 @@ export interface Props {
 @Component
 export default class MainInput extends Vue<Props> {
     public $refs: {
-        selectedItems: HTMLDivElement;
+        selectedItems?: HTMLDivElement;
     };
 
     /* {{{ props */
@@ -53,6 +53,22 @@ export default class MainInput extends Vue<Props> {
              : value !== null;
     }
 
+    get disabledList(): OptionItem[] {
+        const state = this.store.state;
+        const isMultiple = state.multiple;
+        const value = state.selectedOptions;
+
+        if (!isMultiple || !value) {
+            return [];
+        }
+
+        const disabledValues = (value as OptionItem[]).filter((option) => {
+            return option.disabled;
+        });
+
+        return disabledValues;
+    }
+
     get displayPlaceholder(): boolean {
         const placeholder = this.store.state.placeholder;
         const hasValue = this.hasValue;
@@ -76,11 +92,13 @@ export default class MainInput extends Vue<Props> {
         const state = this.store.state;
         const isMultiple = state.multiple;
         const value = state.internalValue;
-        const hasOnlyOneValue = Array.isArray(value) && value.length === 1;
+        const nbSelection = (Array.isArray(value) && value.length) || 0;
+        const hasOnlyOneValue = nbSelection === 1;
+        const hasOnlyDisabled = nbSelection <= this.disabledList.length;
 
         /* Should not display the clear action if there is only one selected
          * item in multiple (as this item has already its remove icon) */
-        return !isMultiple || !hasOnlyOneValue;
+        return !isMultiple || !hasOnlyOneValue || !hasOnlyDisabled;
     }
 
     get clearedLabel(): string {
@@ -239,6 +257,11 @@ export default class MainInput extends Vue<Props> {
         /* Check if there is enough space to display items like there are
          * currently shown */
         const el = this.$refs.selectedItems;
+
+        if (!el) {
+            return;
+        }
+
         const parentEl = el.parentElement as HTMLDivElement;
 
         if (!document.contains(parentEl)) {
@@ -401,7 +424,7 @@ export default class MainInput extends Vue<Props> {
                                 >
                                     { item.text }
                                 </span>
-                                {!this.isDisabled && (
+                                {!this.isDisabled && !item.disabled && (
                                     <Icon
                                         icon="times"
                                         class="selectic-input__selected-items__icon"

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/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;