Do not pass all props down to Input

components/autocomplete/Autocomplete.js

@@ -61,6 +61,7 @@ const factory = (Chip, Input) => {
         values: PropTypes.string,
       }),
       value: PropTypes.any,
+      inputProps: PropTypes.object,
     };
 
     static defaultProps = {
@@ -121,7 +122,7 @@ const factory = (Chip, Input) => {
 
     handleQueryChange = (value, event) => {
       if (value === '' && !this.props.multiple &&
-        (this.props.allowBlank || this.props.allowClear) && this.props.onChange) {
+        this.props.allowClear && this.props.onChange) {
         this.props.onChange(null, event);
       }
       this.updateQuery(value);
@@ -379,30 +380,30 @@ const factory = (Chip, Input) => {
 
     render() {
       const {
-        allowClear, clearTooltip, error, label, source, suggestionMatch, query, // eslint-disable-line no-unused-vars
+        placeholder, allowClear, className, clearTooltip, disabled,
-        selectedPosition, keepFocusOnChange, onQueryChange,   // eslint-disable-line no-unused-vars
+        error, label, value, selectedPosition, theme, multiple
-        theme, multiple, minWidth, ...other
       } = this.props;
-      // outdated properties
+      const inputProps = this.props.inputProps || {};
-      delete other.showSelectedWhenNotInSource;
+      const outerClassName = classnames(theme.autocomplete, {
-      delete other.allowCreate;
-      const className = classnames(theme.autocomplete, {
         [theme.focus]: this.state.focus,
-      }, this.props.className);
+      }, className);
-
+      const withClear = allowClear && (multiple
-      const withClear = allowClear && (this.props.multiple ? this.props.value && Object.keys(this.props.value).length > 0 : this.props.value != null);
+        ? value && Object.keys(value).length > 0
+        : value != null);
       return (
-        <div data-react-toolbox="autocomplete" className={className}>
+        <div data-react-toolbox="autocomplete" className={outerClassName}>
           {selectedPosition === 'above' ? this.renderSelected() : null}
           {withClear ? <span
             className={'material-icons '+theme.clear}
             title={clearTooltip}
             onClick={e => this.handleChange(multiple ? [] : null, e)}>clear</span> : null}
           <Input
-            {...other}
+            {...inputProps}
             ref={(node) => { this.inputNode = node; }}
             autoComplete="off"
             className={theme.input+(withClear ? ' '+theme.withclear : '')}
+            placeholder={placeholder}
+            disabled={disabled}
             error={error}
             label={label}
             onBlur={this.handleQueryBlur}
@@ -413,15 +414,15 @@ const factory = (Chip, Input) => {
             theme={theme}
             themeNamespace="input"
             value={this.state.query == null
-              ? (this.props.multiple || this.props.value == null
+              ? (multiple || value == null
                 ? ''
-                : this.source().get(''+this.props.value))
+                : this.source().get(''+value))
               : this.state.query}
           />
           <Portal>
             {this.state.focus ? this.renderSuggestionList() : null}
           </Portal>
-          {this.props.selectedPosition === 'below' ? this.renderSelected() : null}
+          {selectedPosition === 'below' ? this.renderSelected() : null}
         </div>
       );
     }

components/autocomplete/theme.css

@@ -12,12 +12,12 @@
 
 .clear {
   cursor: pointer;
-  z-index: 10;
-  position: absolute;
   display: block;
-  top: 12px;
   left: -4px;
   padding: 4px;
+  position: absolute;
+  top: 12px;
+  z-index: 10;
 }
 
 .withclear input {
@@ -49,20 +49,20 @@
 }
 
 .suggestions {
-  position: absolute;
   background-color: var(--autocomplete-suggestions-background);
+  box-shadow: var(--zdepth-shadow-1);
   list-style: none;
   max-height: 1px;
+  -ms-overflow-style: none;
   overflow-x: hidden;
   overflow-y: auto;
   padding: 0;
+  position: absolute;
   transition-duration: var(--animation-duration);
   transition-property: max-height, box-shadow;
   transition-timing-function: var(--animation-curve-default);
   width: 100%;
   z-index: var(--z-index-highest);
-  box-shadow: var(--zdepth-shadow-1);
-  -ms-overflow-style: none;
 }
 
 .suggestion {

components/chip/theme.css

@@ -5,13 +5,13 @@
 .chip {
   background-color: var(--chip-background);
   border-radius: var(--chip-height);
-  min-height: var(--chip-height);
   color: var(--chip-color);
   display: inline-block;
   font-size: var(--chip-font-size);
   line-height: var(--chip-height);
   margin-right: var(--chip-margin-right);
   max-width: 100%;
+  min-height: var(--chip-height);
   overflow: hidden;
   padding: 0 var(--chip-padding);
   position: relative;

components/dropdown/theme.css

@@ -171,10 +171,10 @@
 
 .clear {
   cursor: pointer;
-  z-index: 10;
-  position: absolute;
   display: block;
-  top: 12px;
   left: -4px;
   padding: 4px;
+  position: absolute;
+  top: 12px;
+  z-index: 10;
 }

components/table/theme.css

@@ -28,12 +28,14 @@
   @apply --reset;
 }
 
-.table > head, .head {
+.table > head,
+.head {
   padding-bottom: calc(0.3 * var(--unit));
   white-space: nowrap;
 }
 
-.table > tbody > tr, .row {
+.table > tbody > tr,
+.row {
   color: var(--table-row-color);
   height: var(--table-row-height);
   transition-duration: 0.28s;

package.json

@@ -2,7 +2,7 @@
   "name": "react-toolbox",
   "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
   "homepage": "http://www.react-toolbox.io",
-  "version": "2.0.0-beta.15",
+  "version": "2.0.0-beta.16",
   "main": "./lib",
   "module": "./components",
   "author": {