@danielgindi/selectbox 2.0.28 → 2.0.30

package/lib/SelectBox.js

@@ -78,7 +78,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
@@ -124,7 +124,7 @@ export const DefaultOptions = {
     el: null,
     baseClassName: 'selectbox',
     disabled: false,
-    readonly: false,
+    readOnly: false,
     clearable: true,
     hasOpenIndicator: true,
     placeholder: '',
@@ -223,7 +223,7 @@ class SelectBox {
             listOptions: o.listOptions,
 
             disabled: !!o.disabled,
-            readonly: !!o.readonly,
+            readOnly: !!o.readOnly,
             clearable: !!o.clearable,
             hasOpenIndicator: !!o.hasOpenIndicator,
             placeholder: o.placeholder,
@@ -306,7 +306,7 @@ class SelectBox {
         p.multiItemEls = [];
 
         this.enable(!p.disabled);
-        this.setReadOnly(!p.readonly);
+        this.setReadOnly(!p.readOnly);
 
         this._setupDropdownMenu();
 
@@ -535,18 +535,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;
     }
@@ -556,7 +556,7 @@ class SelectBox {
      * @returns {boolean}
      */
     isReadOnly() {
-        return !this._p.readonly;
+        return !this._p.readOnly;
     }
 
     /**
@@ -1686,7 +1686,7 @@ class SelectBox {
                     spellcheck: 'false',
                     role: 'textbox',
                     'aria-autocomplete': 'list',
-                    readOnly: !(p.searchable || p.multi),
+                    readOnly: !(p.searchable || p.multi) || !!p.readOnly,
                 }),
             );
         }
@@ -1720,7 +1720,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*/
@@ -2088,7 +2088,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');
 
@@ -2232,7 +2232,7 @@ class SelectBox {
                         !p.multi &&
                         !dropList.hasFocusedItem() &&
                         !p.disabled &&
-                        !p.readonly
+                        !p.readOnly
                     )) {
                         this.toggleList();
                         evt.preventDefault();
@@ -2244,20 +2244,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');
 
@@ -2274,7 +2274,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;
@@ -2877,7 +2877,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`);
         }
 
@@ -3259,7 +3259,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';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danielgindi/selectbox",
-  "version": "2.0.28",
+  "version": "2.0.30",
   "description": "A collection of dom utilities. So you can work natively with the dom without dom frameworks.",
   "main": "dist/lib.cjs.min.js",
   "module": "lib/index.js",

package/vue/SelectBox.vue

@@ -40,9 +40,13 @@ export const PropTypes = {
         type: Boolean,
         default: false,
     },
-    readonly: {
+    readOnly: {
         type: Boolean,
-        default: false,
+        required: false,
+    },
+    readonly: { // compatibility with simple readonly attr of inputs
+        type: Boolean,
+        required: false,
     },
     clearable: {
         type: Boolean,
@@ -476,9 +480,14 @@ export default {
                 this.nonReactive.instance.disable(value);
         },
 
-        readonly(value) {
+        readOnly() {
+            if (this.nonReactive.instance)
+                this.nonReactive.instance.setReadOnly(this.readOnly ?? this.readonly ?? false);
+        },
+
+        readonly() {
             if (this.nonReactive.instance)
-                this.nonReactive.instance.setReadOnly(value ?? false);
+                this.nonReactive.instance.setReadOnly(this.readOnly ?? this.readonly ?? false);
         },
 
         clearable(value) {
@@ -810,7 +819,7 @@ export default {
                 baseClass: this.baseClass,
                 direction: this.direction,
                 disabled: this.disabled,
-                readonly: this.readonly,
+                readOnly: this.readOnly ?? this.readonly ?? false,
                 clearable: this.clearable,
                 hasOpenIndicator: this.hasOpenIndicator,
                 placeholder: this.placeholder,