INPUT and SELECT components do not respect GRID item space assignation

[pabloa]

• [ X] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

When a INPUT or SELECT components are inside of GRID component, they should follow the layout established by the GRID component.

Current Behavior

Right now <INPUT and <SELECT are rendered without fill the space assigned by the GRID and they must be CSS styleshed 1 by 1. This is worst when the <INPUT has autocomplete because lot of CSS must be used for something that is expected: any component/html inside of a GRID item should use all the space assigned to it.

Steps to Reproduce (for bugs)

https://24zr5plwwy.codesandbox.io/

/* eslint-disable flowtype/require-valid-file-annotation */

import React, { Component } from 'react';
import withRoot from '../components/withRoot';
import Grid from 'material-ui/Grid';
import { InputLabel } from "material-ui/Input";
import { Input } from "material-ui";
import Checkbox from 'material-ui/Checkbox';

class Index extends Component {

  render() {
    const factor = {
      "field_id": "1",
      "editLabel": "This is an edit label"
    }
    return (
      <div>
        <p>current behavior: the input do not fill the space assigend by the grid</p>
        <Grid container>
          <Grid item xs={11}>
            <div style={{ background: 'pink' }}>
              <InputLabel style={{ background: 'yellow' }} htmlFor={factor.field_id}>{factor.editLabel}</InputLabel>
              <Input style={{ background: 'cyan' }} id={factor.field_id} onChange={this.handleChange.bind(this)} type="number" />
            </div>
          </Grid>
          <Grid item xs={1} style={{ background: 'orange' }}>
            <Checkbox onChange={this.handleChange.bind(this)} style={{ background: 'cyan' }} />
          </Grid>
        </Grid>


        <p>{"expected behavior: the input field (and selects) should fill all the space assigned to it by the <GRID item>"}</p>
        <Grid container>
          <Grid item xs={11}>
            <div style={{ background: 'pink' }}>
              <InputLabel style={{ display: 'block', background: 'yellow' }} htmlFor={factor.field_id}>{factor.editLabel}</InputLabel>
              <Input style={{ display: 'block', background: 'cyan' }} id={factor.field_id} onChange={this.handleChange.bind(this)} type="number" />
            </div>
          </Grid>
          <Grid item xs={1} style={{ background: 'orange' }}>
            <Checkbox onChange={this.handleChange.bind(this)} style={{ background: 'cyan' }}/>
          </Grid>
        </Grid>
      </div>
    );
  }

  handleChange(event) {
    alert(event.target.value);
  }
}


export default withRoot(Index);

1. An example is in: https://codesandbox.io/s/24zr5plwwy

Context

I believe this is a problem because <INPUT and <SELECT are not following the space assignation rules of the <GRID component, making the <GRID component not so useful to build forms.

Your Environment

Tech	Version
Material-UI	1.0.13beta
React	last version 15.x and 16.0.0
browser	last chrome and firefox on apple and ubuntu

[oliviertassinari]

The current behavior is the expected behavior. You need to use the FormControl component in this case. Here is an example https://codesandbox.io/s/8kllkwpvnl.

<Grid container>
  <Grid item xs={10}>
    <div style={{ background: 'pink' }}>
      <FormControl fullWidth>
        <InputLabel style={{ background: 'yellow' }} htmlFor={factor.field_id}>{factor.editLabel}</InputLabel>
        <Input style={{ background: 'cyan' }} id={factor.field_id} type="number" value="3" />
      </FormControl>
    </div>
  </Grid>
</Grid>

[pabloa]

Excellent.

The documentation for option fullWith says "If true, the label will take up the full width of its container.". Perhaps it should say something like "If true, the label and the input/select element will take up the full width of its container." or similar.

I will use that. Thx

[oliviertassinari]

@pabloa I like the suggestion. Do you want to update our documentation?

[pabloa]

No :) But I will do it. Let me find out how to do it and I will. P

…

On Thu, Oct 5, 2017 at 12:00 PM, Olivier Tassinari ***@***.*** > wrote: @pabloa <https://github.com/pabloa> I like the suggestion. Do you want to update our documentation? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#8544 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAk_CzmiLEW5CKYFT1S-Sf2B25MV49lwks5spSdUgaJpZM4PuWWC> .