@danielgindi/selectbox 2.0.28 → 2.0.30

package/dist/lib.cjs.js

@@ -1,5 +1,5 @@
 /*!
- * @danielgindi/selectbox 2.0.28
+ * @danielgindi/selectbox 2.0.30
  * git://github.com/danielgindi/selectbox.git
  */
 'use strict';
@@ -9879,7 +9879,7 @@ const inputBackbufferCssProps = [
  * @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} [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
@@ -9925,7 +9925,7 @@ const DefaultOptions = {
   el: null,
   baseClassName: 'selectbox',
   disabled: false,
-  readonly: false,
+  readOnly: false,
   clearable: true,
   hasOpenIndicator: true,
   placeholder: '',
@@ -10024,7 +10024,7 @@ class SelectBox {
       listOptions: o.listOptions,
 
       disabled: !!o.disabled,
-      readonly: !!o.readonly,
+      readOnly: !!o.readOnly,
       clearable: !!o.clearable,
       hasOpenIndicator: !!o.hasOpenIndicator,
       placeholder: o.placeholder,
@@ -10107,7 +10107,7 @@ class SelectBox {
     p.multiItemEls = [];
 
     this.enable(!p.disabled);
-    this.setReadOnly(!p.readonly);
+    this.setReadOnly(!p.readOnly);
 
     this._setupDropdownMenu();
 
@@ -10336,18 +10336,18 @@ class SelectBox {
 
   /**
    * Sets read only mode
-   * @param {boolean=true} readonly Should the control be read only?
+   * @param {boolean=true} readOnly Should the control be read only?
    * @returns {SelectBox}
    */
-  setReadOnly(readonly) {
+  setReadOnly(readOnly) {
     const p = this._p;
 
-    if (readonly === undefined) {
-      readonly = true;
+    if (readOnly === undefined) {
+      readOnly = true;
     }
-    p.readonly = !readonly;
-    p.el.setAttribute('aria-readonly', p.readonly.toString());
-    p.input.readonly = !!p.readonly;
+    p.readOnly = readOnly;
+    p.el.setAttribute('aria-readOnly', p.readOnly.toString());
+    p.input.readOnly = !(p.searchable || p.multi) || !!p.readOnly;
 
     return this;
   }
@@ -10357,7 +10357,7 @@ class SelectBox {
    * @returns {boolean}
    */
   isReadOnly() {
-    return !this._p.readonly;
+    return !this._p.readOnly;
   }
 
   /**
@@ -11487,7 +11487,7 @@ class SelectBox {
         spellcheck: 'false',
         role: 'textbox',
         'aria-autocomplete': 'list',
-        readOnly: !(p.searchable || p.multi)
+        readOnly: !(p.searchable || p.multi) || !!p.readOnly
       })
       );
     }
@@ -11521,7 +11521,7 @@ class SelectBox {
           if (!Dom.closestUntil(evt.target, ".".concat(p.baseClassName, "__item_remove"), evt.currentTarget))
           return;
 
-          if (p.disabled || p.readonly) return;
+          if (p.disabled || p.readOnly) return;
 
           this._removeMultiItemFromEvent(
             /**@type Element*/
@@ -11889,7 +11889,7 @@ class SelectBox {
 
     setTimeout(() => {
       if (this[DestroyedSymbol]) return; // destroyed by event handler
-      if (p.disabled || p.readonly) return;
+      if (p.disabled || p.readOnly) return;
 
       this._trigger('search:blur');
 
@@ -12033,7 +12033,7 @@ class SelectBox {
         !p.multi &&
         !dropList.hasFocusedItem() &&
         !p.disabled &&
-        !p.readonly)
+        !p.readOnly)
         {
           this.toggleList();
           evt.preventDefault();
@@ -12045,20 +12045,20 @@ class SelectBox {
     if (p.input) {
       p.sink.
       add(p.input, 'input.dropdown', () => {var _p$dropList9;
-        if (p.disabled || p.readonly) 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 || p.readonly) return;
+        if (p.disabled || p.readOnly) return;
 
         if (!p.multi && p.searchable) {
           this.openList();
         }
       }).
       add(p.input, 'focus.dropdown', () => {
-        if (p.disabled || p.readonly) return;
+        if (p.disabled || p.readOnly) return;
 
         this._trigger('search:focus');
 
@@ -12075,7 +12075,7 @@ class SelectBox {
 
     p.sink.
     add(p.el, 'mousedown.dropdown', () => {
-      if (!p.multi && !p.searchable && !avoidToggleFromClick && !p.disabled && !p.readonly) {
+      if (!p.multi && !p.searchable && !avoidToggleFromClick && !p.disabled && !p.readOnly) {
         this.toggleList();
       }
       avoidToggleFromClick = false;
@@ -12678,7 +12678,7 @@ class SelectBox {
       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"));
     }
 
@@ -13060,7 +13060,7 @@ class SelectBox {
   _handleMultiKeydown(event) {
     const p = this._p;
 
-    if (p.disabled || p.readonly) return;
+    if (p.disabled || p.readOnly) return;
 
     const isRtl = getComputedStyle(p.el).direction === 'rtl';