fix: Hide menu when editable is filtered and no options are available

HriBB · Aug 20, 2016 · e2f6137 · e2f6137
1 parent da25a71
commit e2f6137
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/src/SelectField/SelectField.js b/src/SelectField/SelectField.js
@@ -203,9 +203,9 @@ export default class SelectField extends Component {
 
     const children = this.getChildren()
 
-    const mainClass = classnames({
-      'mdl-selectfield': true,
+    const mainClass = classnames('mdl-selectfield', {
       'mdl-selectfield--editable': editable,
+      'mdl-selectfield--empty': !children.length,
       'mdl-selectfield--error': error,
     }, className)
 
@@ -241,7 +241,7 @@ export default class SelectField extends Component {
           />}
 
         {!readOnly &&
-          <Menu target={this.id} ripple>
+          <Menu target={this.id}>
             {Children.map(children, child => {
               const className = classnames({
                 'mdl-menu__item--selected': !multiple && child.props.value === value,
@@ -272,7 +272,7 @@ export default class SelectField extends Component {
 let selectFieldIndex = 0
 
 /**
- * Has override been applied
+ * Has override been applied?
  *
  * @type {Boolean}
  */

diff --git a/src/SelectField/SelectField.scss b/src/SelectField/SelectField.scss
@@ -8,6 +8,12 @@
     }
   }
 
+  &.mdl-selectfield--empty {
+    .mdl-menu__container {
+      display: none;
+    }
+  }
+
   &.mdl-selectfield--error {
     .mdl-selectfield__arrow {
       color: #d50000;