@danielgindi/selectbox 2.0.27 → 2.0.29

package/lib/SelectBox.js

@@ -78,6 +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} [clearable=true] Has clear button?
  * @property {boolean} [hasOpenIndicator=true] has open/close indicator?
  * @property {string} [placeholder=''] Placeholder text
@@ -123,6 +124,7 @@ export const DefaultOptions = {
     el: null,
     baseClassName: 'selectbox',
     disabled: false,
+    readOnly: false,
     clearable: true,
     hasOpenIndicator: true,
     placeholder: '',
@@ -221,6 +223,7 @@ class SelectBox {
             listOptions: o.listOptions,
 
             disabled: !!o.disabled,
+            readOnly: !!o.readOnly,
             clearable: !!o.clearable,
             hasOpenIndicator: !!o.hasOpenIndicator,
             placeholder: o.placeholder,
@@ -303,6 +306,7 @@ class SelectBox {
         p.multiItemEls = [];
 
         this.enable(!p.disabled);
+        this.setReadOnly(!p.readOnly);
 
         this._setupDropdownMenu();
 
@@ -529,6 +533,32 @@ class SelectBox {
         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}
@@ -1656,7 +1686,7 @@ class SelectBox {
                     spellcheck: 'false',
                     role: 'textbox',
                     'aria-autocomplete': 'list',
-                    readOnly: !(p.searchable || p.multi),
+                    readOnly: !(p.searchable || p.multi) || !!p.readOnly,
                 }),
             );
         }
@@ -1690,7 +1720,7 @@ class SelectBox {
                         if (!closestUntil(evt.target, `.${p.baseClassName}__item_remove`, evt.currentTarget))
                             return;
 
-                        if (p.disabled) return;
+                        if (p.disabled || p.readOnly) return;
 
                         this._removeMultiItemFromEvent(
                             /**@type Element*/
@@ -1743,6 +1773,7 @@ class SelectBox {
             if (p.hasOpenIndicator) {
                 p.openIndicator = createElement('span', { class: `${p.baseClassName}__open_indicator` });
                 p.el.appendChild(p.openIndicator);
+                p.el.classList.add(`${p.baseClassName}__has_open_indicator`);
             } else {
                 remove(p.openIndicator);
                 delete p.openIndicator;
@@ -2057,7 +2088,7 @@ class SelectBox {
 
         setTimeout(() => {
             if (this[DestroyedSymbol]) return; // destroyed by event handler
-            if (p.disabled) return;
+            if (p.disabled || p.readOnly) return;
 
             this._trigger('search:blur');
 
@@ -2200,7 +2231,8 @@ class SelectBox {
                         p.lastKeyAllowsNonTypeKeys &&
                         !p.multi &&
                         !dropList.hasFocusedItem() &&
-                        !p.disabled
+                        !p.disabled &&
+                        !p.readOnly
                     )) {
                         this.toggleList();
                         evt.preventDefault();
@@ -2212,20 +2244,20 @@ class SelectBox {
         if (p.input) {
             p.sink
                 .add(p.input, 'input.dropdown', () => {
-                    if (p.disabled) 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) 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');
 
@@ -2242,7 +2274,7 @@ class SelectBox {
 
         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;
@@ -2251,7 +2283,7 @@ class SelectBox {
                 if (currentTouchId) return;
                 currentTouchId = evt.changedTouches[0].identifier;
 
-                if (this.isDisabled())
+                if (this.isDisabled() || this.isReadOnly())
                     return;
 
                 if (closestUntil(evt.target, `.${p.baseClassName}__item,.${p.baseClassName}__clear`, p.el))
@@ -2691,7 +2723,7 @@ class SelectBox {
                 p.el.classList.add(`${p.baseClassName}__has_clear`);
 
                 p.sink.add(p.clearButton, 'click', () => {
-                    if (this.isDisabled()) return;
+                    if (this.isDisabled() || this.isReadOnly()) return;
                     this.clear();
                 });
             }
@@ -2845,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`);
         }
 
@@ -3227,7 +3259,7 @@ class SelectBox {
     _handleMultiKeydown(event) {
         const p = this._p;
 
-        if (p.disabled) 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.27",
+  "version": "2.0.29",
   "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/scss/selectbox.scss

@@ -70,6 +70,14 @@ $spinner-transition-duration: .15s;
 		}
 	}
 
+	&[aria-readonly=true] {
+		cursor: default;
+
+		* {
+			cursor: default;
+		}
+	}
+
 	&.has_droplist_above {
 		border-top-left-radius: 0;
 		border-top-right-radius: 0;
@@ -272,7 +280,7 @@ $spinner-transition-duration: .15s;
         left: calc(var(--selectbox-clear-spacing) + var(--selectbox-open-indicator-width));
     }
 
-    .selectbox[aria-disabled=true] > & {
+    .selectbox[aria-disabled=true] > &, .selectbox[aria-readonly=true] > & {
         display: none;
     }
 }

package/vue/SelectBox.vue

@@ -40,6 +40,10 @@ export const PropTypes = {
         type: Boolean,
         default: false,
     },
+    readOnly: {
+        type: Boolean,
+        default: false,
+    },
     clearable: {
         type: Boolean,
         default: true,
@@ -472,6 +476,11 @@ export default {
                 this.nonReactive.instance.disable(value);
         },
 
+        readOnly(value) {
+            if (this.nonReactive.instance)
+                this.nonReactive.instance.setReadOnly(value ?? false);
+        },
+
         clearable(value) {
             if (this.nonReactive.instance)
                 this.nonReactive.instance.setClearable(value);
@@ -801,6 +810,7 @@ export default {
                 baseClass: this.baseClass,
                 direction: this.direction,
                 disabled: this.disabled,
+                readOnly: this.readOnly,
                 clearable: this.clearable,
                 hasOpenIndicator: this.hasOpenIndicator,
                 placeholder: this.placeholder,