Don't show dropdown if no results by default.

Allow to show empty dropdown via zeroDropdown property. Fixed onefinestay#26
thorgate · Feb 27, 2015 · 4861261 · 4861261
1 parent 8c27d87
commit 4861261
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/dist/multiple.js b/dist/multiple.js
@@ -40,6 +40,7 @@ var MultipleChoice = React.createClass({displayName: 'MultipleChoice',
   mixins: [SearchMixin],
 
   propTypes: {
+    zeroDropdown: React.PropTypes.bool, // Set to true, to always show dropdown, even if there aren't any options to show
     name: React.PropTypes.string, // name of input
     placeholder: React.PropTypes.string, // input placeholder
     values: React.PropTypes.array, // initial values
@@ -145,6 +146,10 @@ var MultipleChoice = React.createClass({displayName: 'MultipleChoice',
   },
 
   _getAvailableOptions: function(values) {
+    if (!values) {
+        values = this.state.values;
+    }
+
     var options = this.state.initialOptions;
     var valueField = this.props.valueField;
 
@@ -361,7 +366,7 @@ var MultipleChoice = React.createClass({displayName: 'MultipleChoice',
             ref: "input"})
         ), 
 
-        this.state.focus ?
+        this.state.focus && (!this.props.zeroDropdown || options.length > 0) ?
           React.createElement("div", {className: "react-choice-options", ref: "options"}, 
             React.createElement("ul", {className: "react-choice-options__list"}, 
               options

diff --git a/src/multiple.jsx b/src/multiple.jsx
@@ -40,6 +40,7 @@ var MultipleChoice = React.createClass({
   mixins: [SearchMixin],
 
   propTypes: {
+    zeroDropdown: React.PropTypes.bool, // Set to true, to always show dropdown, even if there aren't any options to show
     name: React.PropTypes.string, // name of input
     placeholder: React.PropTypes.string, // input placeholder
     values: React.PropTypes.array, // initial values
@@ -145,6 +146,10 @@ var MultipleChoice = React.createClass({
   },
 
   _getAvailableOptions: function(values) {
+    if (!values) {
+        values = this.state.values;
+    }
+
     var options = this.state.initialOptions;
     var valueField = this.props.valueField;
 
@@ -361,7 +366,7 @@ var MultipleChoice = React.createClass({
             ref="input" />
         </div>
 
-        {this.state.focus ?
+        {this.state.focus && (!this.props.zeroDropdown || options.length > 0) ?
           <div className="react-choice-options" ref="options">
             <ul className="react-choice-options__list">
               {options}