Make `disabled` and `placeholder` work

Selectbox.js

@@ -1,5 +1,6 @@
 // Simple Dropdown/Autocomplete with single/multiple selection and easy customisation via CSS modules
 // Version 2019-08-30
+// License: LGPLv3.0+
 // (c) Vitaliy Filippov 2019+
 
 import React from 'react';
@@ -17,7 +18,7 @@ export default class Selectbox extends React.PureComponent
         readOnly: PropTypes.bool,
         // show "clear" icon (cross)
         allowClear: PropTypes.bool,
-        // select/autocomplete options
+        // select/autocomplete options - either an array of objects, or a { [string]: string } object
         source: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
         // current value
         value: PropTypes.oneOfType([PropTypes.array, PropTypes.string, PropTypes.number]),
@@ -27,15 +28,25 @@ export default class Selectbox extends React.PureComponent
         labelKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
         // item id key - default "id"
         valueKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        // automatically filter autocomplete options based on user input if `true`
         suggestionMatch: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['disabled'])]),
+        // additional message to display below autocomplete options (arbitrary HTML, for example "...")
         suggestionMsg: PropTypes.any,
+        // disable the whole input
         disabled: PropTypes.bool,
+        // placeholder to display when the input is empty
         placeholder: PropTypes.string,
+        // minimum suggestion list width in pixels
         minWidth: PropTypes.number,
+        // additional CSS class name for the input
         className: PropTypes.string,
+        // additional CSS styles for the input
         style: PropTypes.object,
+        // additional event listener for onFocus
         onFocus: PropTypes.func,
+        // additional event listener for onBlur
         onBlur: PropTypes.func,
+        // additional event listener for user text input
         onQueryChange: PropTypes.func,
     }
 
@@ -142,11 +153,18 @@ export default class Selectbox extends React.PureComponent
 
     focusInput = () =>
     {
-        this.input.focus();
+        if (!this.props.disabled)
+        {
+            this.input.focus();
+        }
     }
 
     onFocus = () =>
     {
+        if (this.props.disabled)
+        {
+            return;
+        }
         if (!this.props.multiple && this.state.active === null)
         {
             const v = this.props.value, vk = this.props.valueKey||'id';
@@ -182,7 +200,8 @@ export default class Selectbox extends React.PureComponent
             : this.state.query;
         const input = <input
             readOnly={this.props.readOnly}
-            placeholder={this.props.multiple ? undefined : this.props.placeholder}
+            disabled={this.props.disabled}
+            placeholder={!this.props.multiple || !this.props.value || !this.props.value.length ? this.props.placeholder : undefined}
             ref={this.setInput}
             className={autocomplete_css.inputElement}
             style={this.props.multiple ? { width: this.state.inputWidth+'px' } : undefined}
@@ -201,10 +220,11 @@ export default class Selectbox extends React.PureComponent
             {this.props.multiple
                 ? <div className={autocomplete_css.values}>
                     <span className={autocomplete_css.inputElement+' '+autocomplete_css.sizer} ref={this.setSizer}>
-                        {value}
+                        {this.props.multiple && (!this.props.value || !this.props.value.length) && value === ''
+                            ? (this.props.placeholder || '') : value}
                     </span>
                     {(this.props.value||[]).map((id, idx) => <span className={autocomplete_css.value} key={idx}>
-                        {this.props.allowClear
+                        {this.props.allowClear && !this.props.disabled
                             ? <span data-n={idx} className={autocomplete_css.clearValue} onClick={this.removeValue}></span>
                             : null}
                         {this.item_hash[id]}

autocomplete.css

@@ -27,6 +27,11 @@
     cursor: pointer;
 }
 
+.input.disabled
+{
+    background: #f4f4f4;
+}
+
 .input.multiple
 {
     display: flex;
@@ -65,6 +70,7 @@
 
 .inputElement
 {
+    background: transparent;
     font-size: inherit;
     line-height: 200%;
     border: 0;
@@ -81,6 +87,11 @@
     display: none;
 }
 
+.inputElement[disabled]
+{
+    background: transparent;
+}
+
 .multiple .inputElement
 {
     padding: 0;

main.js

@@ -34,6 +34,17 @@ class Test extends React.PureComponent
                 source={OPTIONS}
                 allowClear={true}
                 multiple={true}
+                placeholder="Выберите значение"
+                suggestionMatch={true}
+                value={this.state.value}
+                style={{marginBottom: '20px'}}
+                onChange={this.onChange}
+            />
+            <Selectbox
+                source={OPTIONS}
+                allowClear={true}
+                multiple={true}
+                disabled={true}
                 suggestionMatch={true}
                 value={this.state.value}
                 style={{marginBottom: '20px'}}