@danielgindi/selectbox 2.0.27 → 2.0.29

package/dist/lib.umd.js

@@ -1,5 +1,5 @@
 /*!
- * @danielgindi/selectbox 2.0.27
+ * @danielgindi/selectbox 2.0.29
  * git://github.com/danielgindi/selectbox.git
  */
 (function (global, factory) {
@@ -9875,6 +9875,7 @@
    * @property {string|string[]} [additionalClasses]
    * @property {'ltr'|'rtl'|'auto'} [direction='auto']
    * @property {boolean} [disabled=false] Should start as disabled?
+   * @property {boolean} [readOnly=false] Should start as readOnly?
    * @property {boolean} [clearable=true] Has clear button?
    * @property {boolean} [hasOpenIndicator=true] has open/close indicator?
    * @property {string} [placeholder=''] Placeholder text
@@ -9920,6 +9921,7 @@
     el: null,
     baseClassName: 'selectbox',
     disabled: false,
+    readOnly: false,
     clearable: true,
     hasOpenIndicator: true,
     placeholder: '',
@@ -10018,6 +10020,7 @@
         listOptions: o.listOptions,
 
         disabled: !!o.disabled,
+        readOnly: !!o.readOnly,
         clearable: !!o.clearable,
         hasOpenIndicator: !!o.hasOpenIndicator,
         placeholder: o.placeholder,
@@ -10100,6 +10103,7 @@
       p.multiItemEls = [];
 
       this.enable(!p.disabled);
+      this.setReadOnly(!p.readOnly);
 
       this._setupDropdownMenu();
 
@@ -10326,6 +10330,32 @@
       return this._p.disabled;
     }
 
+    /**
+     * Sets read only mode
+     * @param {boolean=true} readOnly Should the control be read only?
+     * @returns {SelectBox}
+     */
+    setReadOnly(readOnly) {
+      const p = this._p;
+
+      if (readOnly === undefined) {
+        readOnly = true;
+      }
+      p.readOnly = !readOnly;
+      p.el.setAttribute('aria-readOnly', p.readOnly.toString());
+      p.input.readOnly = !(p.searchable || p.multi) || !!p.readOnly;
+
+      return this;
+    }
+
+    /**
+     * Is the control enabled?
+     * @returns {boolean}
+     */
+    isReadOnly() {
+      return !this._p.readOnly;
+    }
+
     /**
      * @param {string|string[]} classes
      * @returns {SelectBox}
@@ -11453,7 +11483,7 @@
           spellcheck: 'false',
           role: 'textbox',
           'aria-autocomplete': 'list',
-          readOnly: !(p.searchable || p.multi)
+          readOnly: !(p.searchable || p.multi) || !!p.readOnly
         })
         );
       }
@@ -11487,7 +11517,7 @@
             if (!Dom.closestUntil(evt.target, ".".concat(p.baseClassName, "__item_remove"), evt.currentTarget))
             return;
 
-            if (p.disabled) return;
+            if (p.disabled || p.readOnly) return;
 
             this._removeMultiItemFromEvent(
               /**@type Element*/
@@ -11540,6 +11570,7 @@
         if (p.hasOpenIndicator) {
           p.openIndicator = Dom.createElement('span', { class: "".concat(p.baseClassName, "__open_indicator") });
           p.el.appendChild(p.openIndicator);
+          p.el.classList.add("".concat(p.baseClassName, "__has_open_indicator"));
         } else {
           DomCompat.remove(p.openIndicator);
           delete p.openIndicator;
@@ -11854,7 +11885,7 @@
 
       setTimeout(() => {
         if (this[DestroyedSymbol]) return; // destroyed by event handler
-        if (p.disabled) return;
+        if (p.disabled || p.readOnly) return;
 
         this._trigger('search:blur');
 
@@ -11997,7 +12028,8 @@
           p.lastKeyAllowsNonTypeKeys &&
           !p.multi &&
           !dropList.hasFocusedItem() &&
-          !p.disabled)
+          !p.disabled &&
+          !p.readOnly)
           {
             this.toggleList();
             evt.preventDefault();
@@ -12009,20 +12041,20 @@
       if (p.input) {
         p.sink.
         add(p.input, 'input.dropdown', () => {var _p$dropList9;
-          if (p.disabled) return;
+          if (p.disabled || p.readOnly) return;
 
           p.filterTerm = p.input.value.trim();
           (_p$dropList9 = p.dropList) === null || _p$dropList9 === void 0 || _p$dropList9.setSearchTerm(p.filterTerm, true);
         }).
         add(p.input, 'click.dropdown', () => {
-          if (p.disabled) return;
+          if (p.disabled || p.readOnly) return;
 
           if (!p.multi && p.searchable) {
             this.openList();
           }
         }).
         add(p.input, 'focus.dropdown', () => {
-          if (p.disabled) return;
+          if (p.disabled || p.readOnly) return;
 
           this._trigger('search:focus');
 
@@ -12039,7 +12071,7 @@
 
       p.sink.
       add(p.el, 'mousedown.dropdown', () => {
-        if (!p.multi && !p.searchable && !avoidToggleFromClick && !p.disabled) {
+        if (!p.multi && !p.searchable && !avoidToggleFromClick && !p.disabled && !p.readOnly) {
           this.toggleList();
         }
         avoidToggleFromClick = false;
@@ -12048,7 +12080,7 @@
         if (currentTouchId) return;
         currentTouchId = evt.changedTouches[0].identifier;
 
-        if (this.isDisabled())
+        if (this.isDisabled() || this.isReadOnly())
         return;
 
         if (Dom.closestUntil(evt.target, ".".concat(p.baseClassName, "__item,.").concat(p.baseClassName, "__clear"), p.el))
@@ -12488,7 +12520,7 @@
           p.el.classList.add("".concat(p.baseClassName, "__has_clear"));
 
           p.sink.add(p.clearButton, 'click', () => {
-            if (this.isDisabled()) return;
+            if (this.isDisabled() || this.isReadOnly()) return;
             this.clear();
           });
         }
@@ -12642,7 +12674,7 @@
         if (p.input) p.input.readOnly = false;
         p.el.classList.add("".concat(p.baseClassName, "__searchable"));
       } else {
-        if (p.input) p.input.readOnly = true;
+        if (p.input) p.input.readOnly = p.readOnly;
         p.el.classList.remove("".concat(p.baseClassName, "__searchable"));
       }
 
@@ -13024,7 +13056,7 @@
     _handleMultiKeydown(event) {
       const p = this._p;
 
-      if (p.disabled) return;
+      if (p.disabled || p.readOnly) return;
 
       const isRtl = getComputedStyle(p.el).direction === 'rtl';