[DropDownMenu] [SelectField] Add defaultText prop

mui · Aug 4, 2016 · 86902ab · 86902ab
1 parent 7ddc26a
commit 86902ab
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 5 deletions.
diff --git a/src/DropDownMenu/DropDownMenu.js b/src/DropDownMenu/DropDownMenu.js
@@ -98,6 +98,10 @@ class DropDownMenu extends Component {
      * The css class name of the root element.
      */
     className: PropTypes.string,
+    /**
+     * Default text to be shown when there's no item with the corresponding value.
+     */
+    defaultText: PropTypes.string,
     /**
      * Disables the menu.
      */
@@ -151,6 +155,7 @@ class DropDownMenu extends Component {
   static defaultProps = {
     animated: true,
     autoWidth: true,
+    defaultText: '',
     disabled: false,
     openImmediately: false,
     maxHeight: 500,
@@ -247,6 +252,7 @@ class DropDownMenu extends Component {
       autoWidth,
       children,
       className,
+      defaultText,
       iconStyle,
       labelStyle,
       listStyle,
@@ -267,9 +273,9 @@ class DropDownMenu extends Component {
     const {prepareStyles} = this.context.muiTheme;
     const styles = getStyles(this.props, this.context);
 
-    let displayValue;
+    let displayValue = defaultText;
     React.Children.forEach(children, (child) => {
-      if (!displayValue || value === child.props.value) {
+      if (value === child.props.value) {
         // This will need to be improved (in case primaryText is a node)
         displayValue = child.props.label || child.props.primaryText;
       }

diff --git a/src/DropDownMenu/DropDownMenu.spec.js b/src/DropDownMenu/DropDownMenu.spec.js
@@ -21,15 +21,15 @@ describe('<DropDownMenu />', () => {
     assert.strictEqual(wrapper.childAt(0).childAt(0).childAt(0).node, 'Every Night');
   });
 
-  it('displays the text field of the first menuItems prop when value prop isn\'t found', () => {
+  it('displays the text field of the defaultText prop when value prop isn\'t found', () => {
     const wrapper = shallowWithContext(
-      <DropDownMenu value={4}>
+      <DropDownMenu value={4} defaultText="Default value">
         <div value={1} primaryText="Never" />
         <div value={2} primaryText="Every Night" />
         <div value={3} primaryText="Weeknights" />
       </DropDownMenu>
     );
 
-    assert.strictEqual(wrapper.childAt(0).childAt(0).childAt(0).node, 'Never');
+    assert.strictEqual(wrapper.childAt(0).childAt(0).childAt(0).node, 'Default value');
   });
 });
diff --git a/src/SelectField/SelectField.js b/src/SelectField/SelectField.js
@@ -36,6 +36,10 @@ class SelectField extends Component {
      * represent the selected menu item in the rendered select field.
      */
     children: PropTypes.node,
+    /**
+     * Default text to be shown when there's no item with the corresponding value.
+     */
+    defaultText: PropTypes.string,
     /**
      * If true, the select field will be disabled.
      */
@@ -157,6 +161,7 @@ class SelectField extends Component {
       underlineStyle,
       errorStyle,
       selectFieldRoot,
+      defaultText,
       disabled,
       floatingLabelFixed,
       floatingLabelText,
@@ -180,6 +185,7 @@ class SelectField extends Component {
       <TextField
         {...other}
         style={style}
+        defaultText={hintText || floatingLabelText ? '' : defaultText}
         disabled={disabled}
         floatingLabelFixed={floatingLabelFixed}
         floatingLabelText={floatingLabelText}
@@ -197,6 +203,7 @@ class SelectField extends Component {
         underlineFocusStyle={underlineFocusStyle}
       >
         <DropDownMenu
+          defaultText={defaultText}
           disabled={disabled}
           style={Object.assign(styles.dropDownMenu, selectFieldRoot, menuStyle)}
           labelStyle={Object.assign(styles.label, labelStyle)}