@danielgindi/selectbox 2.0.28 → 2.0.30

package/dist/lib.es6.js

@@ -1,5 +1,5 @@
 /*!
- * @danielgindi/selectbox 2.0.28
+ * @danielgindi/selectbox 2.0.30
  * git://github.com/danielgindi/selectbox.git
  */
 import { createElement, closestUntil, setElementAttrs, next, prev } from '@danielgindi/dom-utils/lib/Dom';
@@ -3388,7 +3388,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
@@ -3434,7 +3434,7 @@ const DefaultOptions = {
     el: null,
     baseClassName: 'selectbox',
     disabled: false,
-    readonly: false,
+    readOnly: false,
     clearable: true,
     hasOpenIndicator: true,
     placeholder: '',
@@ -3533,7 +3533,7 @@ class SelectBox {
             listOptions: o.listOptions,
 
             disabled: !!o.disabled,
-            readonly: !!o.readonly,
+            readOnly: !!o.readOnly,
             clearable: !!o.clearable,
             hasOpenIndicator: !!o.hasOpenIndicator,
             placeholder: o.placeholder,
@@ -3616,7 +3616,7 @@ class SelectBox {
         p.multiItemEls = [];
 
         this.enable(!p.disabled);
-        this.setReadOnly(!p.readonly);
+        this.setReadOnly(!p.readOnly);
 
         this._setupDropdownMenu();
 
@@ -3845,18 +3845,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;
     }
@@ -3866,7 +3866,7 @@ class SelectBox {
      * @returns {boolean}
      */
     isReadOnly() {
-        return !this._p.readonly;
+        return !this._p.readOnly;
     }
 
     /**
@@ -4996,7 +4996,7 @@ class SelectBox {
                     spellcheck: 'false',
                     role: 'textbox',
                     'aria-autocomplete': 'list',
-                    readOnly: !(p.searchable || p.multi),
+                    readOnly: !(p.searchable || p.multi) || !!p.readOnly,
                 }),
             );
         }
@@ -5030,7 +5030,7 @@ class SelectBox {
                         if (!closestUntil(evt.target, `.${p.baseClassName}__item_remove`, evt.currentTarget))
                             return;
 
-                        if (p.disabled || p.readonly) return;
+                        if (p.disabled || p.readOnly) return;
 
                         this._removeMultiItemFromEvent(
                             /**@type Element*/
@@ -5398,7 +5398,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');
 
@@ -5542,7 +5542,7 @@ class SelectBox {
                         !p.multi &&
                         !dropList.hasFocusedItem() &&
                         !p.disabled &&
-                        !p.readonly
+                        !p.readOnly
                     )) {
                         this.toggleList();
                         evt.preventDefault();
@@ -5554,20 +5554,20 @@ class SelectBox {
         if (p.input) {
             p.sink
                 .add(p.input, 'input.dropdown', () => {
-                    if (p.disabled || p.readonly) return;
+                    if (p.disabled || p.readOnly) return;
 
                     p.filterTerm = p.input.value.trim();
                     p.dropList?.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');
 
@@ -5584,7 +5584,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;
@@ -6187,7 +6187,7 @@ class SelectBox {
             if (p.input) p.input.readOnly = false;
             p.el.classList.add(`${p.baseClassName}__searchable`);
         } else {
-            if (p.input) p.input.readOnly = true;
+            if (p.input) p.input.readOnly = p.readOnly;
             p.el.classList.remove(`${p.baseClassName}__searchable`);
         }
 
@@ -6569,7 +6569,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';