Beeter demo, proper select size

ctavan · Mar 8, 2017 · 0526359 · 0526359
1 parent cb094cf
commit 0526359
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 17 deletions.
diff --git a/docs/site/src/demos/select-field/SimpleSelectField.js b/docs/site/src/demos/select-field/SimpleSelectField.js
@@ -8,7 +8,8 @@ import MenuItem from 'material-ui/Menu/MenuItem';
 import Icon from 'material-ui/Icon';
 
 const styleSheet = createStyleSheet('SimpleSelectField', (theme) => ({
-  select: {
+  selectBox: {
+    display: 'inline-flex',
     margin: 8,
   }
 }));
@@ -29,19 +30,20 @@ export default class SimpleSelectField extends Component {
 
     return (
       <div>
-        <SelectField
-          label="Sample"
-          value={this.state.value}
-          onChange={this.handleChange}
-          className={classes.select}
-        >
-          <MenuItem value=''>None</MenuItem>
-          <MenuItem value={1}>One</MenuItem>
-          <MenuItem value={2}>Two</MenuItem>
-          <MenuItem value={3}>Three</MenuItem>
-        </SelectField>
-
-         <SelectField
+        <div className={classes.selectBox}>
+          <SelectField
+            label="Sample"
+            value={this.state.value}
+            onChange={this.handleChange}
+          >
+            <MenuItem value=''>None</MenuItem>
+            <MenuItem value={1}>One</MenuItem>
+            <MenuItem value={2}>Two</MenuItem>
+            <MenuItem value={3}>Three</MenuItem>
+          </SelectField>
+        </div>
+        <div className={classes.selectBox}>
+          <SelectField
             label="Sample"
             hideLabel={true}
             value={this.state.value}
@@ -53,7 +55,7 @@ export default class SimpleSelectField extends Component {
             <MenuItem value={2}>Two</MenuItem>
             <MenuItem value={3}>Three</MenuItem>
           </SelectField>
-
+        </div>
       </div>
     );
   }

diff --git a/src/SelectField/SelectField.js b/src/SelectField/SelectField.js
@@ -14,11 +14,13 @@ import Menu from 'material-ui/Menu/Menu';
 
 // import DropDownMenu from '../DropDownMenu';
 
-export const styleSheet = createStyleSheet('MuiButton', (theme) => {
+export const styleSheet = createStyleSheet('MuiSelectField', (theme) => {
   return {
     label: {
       paddingLeft: 0,
     },
+    menu: {
+    },
     icon: {
       right: 0,
     },
@@ -142,11 +144,13 @@ class SelectField extends Component {
           onMouseDown={this.handleMouseDown}
           onClick={this.handleClick}
           component={SelectFieldInput}
+          label={label}
           options={children}
           {...inputProps}
         />
         <Menu
           anchorEl={this.state.anchorEl}
+          className={classes.menu}
           open={this.state.open}
           onRequestClose={this.handleRequestClose}
           {...menuProps}

diff --git a/src/SelectField/SelectFieldInput.js b/src/SelectField/SelectFieldInput.js
@@ -20,6 +20,9 @@ const styleSheet = createStyleSheet('MuiSelectFieldInput', (theme) => {
       position: 'relative',
       zIndex: 2,
     },
+    labelHolder: {
+      display: 'none',
+    },
     icon: {
       color: theme.palette.text.secondary,
       position: 'absolute',
@@ -37,10 +40,12 @@ export default class SelectFieldInput extends Component {
 
   render() {
     const classes = this.context.styleManager.render(styleSheet)
-    const { options, ...inputprops } = this.props
+    const { label, options, ...inputprops } = this.props
     return (
       <div className={classes.root}>
         <select {...inputprops} className={classNames(this.props.className, classes.select)}>
+          {/* Need this option for proper select sizing */}
+          <option className={classes.labelHolder}>{label}</option>
           {React.Children.map(options, (option, index) =>
             React.createElement('option', {
               key: index,