<p dir="auto">When using a multi-line text field with full width the field isn't full width.</p>
<p dir="auto">Regression of <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="268192316" data-permission-text="Title is private" data-url="https://github.com/mui/material-ui/issues/8835" data-hovercard-type="pull_request" data-hovercard-url="/mui/material-ui/pull/8835/hovercard" href="https://github.com/mui/material-ui/pull/8835">#8835</a> (<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="268008317" data-permission-text="Title is private" data-url="https://github.com/mui/material-ui/issues/8825" data-hovercard-type="issue" data-hovercard-url="/mui/material-ui/issues/8825/hovercard" href="https://github.com/mui/material-ui/issues/8825">#8825</a>)</p>

<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/callemall/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">The textfield / textarea should be full width.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">The textfield / textarea is not full width.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto"><a href="https://codesandbox.io/s/l5on3rjokl" rel="nofollow">https://codesandbox.io/s/l5on3rjokl</a></p>
<p dir="auto">Input field should be full width.</p>
<h2 dir="auto">Context</h2>
<p dir="auto">Works in beta 18</p>
<p dir="auto">Culprit is this change <a href="https://github.com/callemall/material-ui/pull/8835/files#diff-deaeb5c7e253bfa4f497fa8ace0b3607R67">https://github.com/callemall/material-ui/pull/8835/files#diff-deaeb5c7e253bfa4f497fa8ace0b3607R67</a></p>
<h2 dir="auto">Your Environment</h2>
<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>v1.0.0-beta.19</td>
</tr>
<tr>
<td>React</td>
<td>15</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome 62</td>
</tr>
</tbody>
</table>
<p dir="auto">The <code class="notranslate">&lt;Input /&gt;</code> and <code class="notranslate">&lt;TextField /&gt;</code> component's props: <em>spellcheck</em> and <em>lang</em> should be set on the input and textfield respectively</p>


<ul dir="auto">
<li>[x ] I have searched the <a href="https://github.com/callemall/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>

<p dir="auto">I would expect that spellcheck and lang props propagates down to the input or textfield elements within the respective components.</p>
<p dir="auto">Rendered expected html looks something like this(Simplified):</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;div class=&quot;mui-root&quot;  &gt;
  &lt;div class=&quot;muiTextArea-root&quot;&gt;
    &lt;textarea spellcheck=true lang=&quot;nn&quot;/&gt;
  &lt;/div&gt;
&lt;div/&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">mui-root</span>"  <span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">muiTextArea-root</span>"<span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">textarea</span> <span class="pl-c1">spellcheck</span>=<span class="pl-s">true</span> <span class="pl-c1">lang</span>="<span class="pl-s">nn</span>"/&gt;
  <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">div</span>/&gt;</pre></div>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto">Currently when rendered the props are set on the wrapper when using <code class="notranslate">&lt;Input /&gt;</code> or <code class="notranslate">&lt;TextField /&gt;</code> . The props are not set on the input or textfield element.</p>
<p dir="auto">Rendered html:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;div class=&quot;mui-root&quot; spellcheck=true lang=&quot;nn&quot;&gt;
  &lt;div class=&quot;muiTextArea-root&quot;&gt;
    &lt;textarea /&gt;
  &lt;/div&gt;
&lt;div/&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">mui-root</span>" <span class="pl-c1">spellcheck</span>=<span class="pl-s">true</span> <span class="pl-c1">lang</span>="<span class="pl-s">nn</span>"<span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">muiTextArea-root</span>"<span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">textarea</span> /&gt;
  <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">div</span>/&gt;</pre></div>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>

<p dir="auto">Test the html in IE: <a href="https://codepen.io/doff3n/pen/xPqgGR" rel="nofollow">https://codepen.io/doff3n/pen/xPqgGR</a> You may need to paste the text again</p>
<p dir="auto">This is what I used:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;Input
  spellCheck={true}
  lang={language}
  multiline
  fullWidth={true}
  value={this.state.text}
  onChange={this.handleChangeText} 
/&gt;"><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-ent">Input</span>
  <span class="pl-c1">spellCheck</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">true</span><span class="pl-kos">}</span>
  <span class="pl-c1">lang</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">language</span><span class="pl-kos">}</span>
  <span class="pl-c1">multiline</span>
  <span class="pl-c1">fullWidth</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">true</span><span class="pl-kos">}</span>
  <span class="pl-c1">value</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">state</span><span class="pl-kos">.</span><span class="pl-c1">text</span><span class="pl-kos">}</span>
  <span class="pl-c1">onChange</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">handleChangeText</span><span class="pl-kos">}</span> 
<span class="pl-c1">/</span><span class="pl-c1">&gt;</span></pre></div>
<h2 dir="auto">Context</h2>
    
<p dir="auto">I am implementing a spellchecker where you should be able to switch between different spellchecking languages, In norway we have two different official written languages. It should also be possible to turn off the spellcheck. In chrome the value is inherited as according to <a href="https://html.spec.whatwg.org/multipage/interaction.html#spelling-and-grammar-checking" rel="nofollow"> spec</a>. A solution where I could set the props directly on the input element would work for me, or that the props are inherited down to the element.</p>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>1.0.0-beta.17</td>
</tr>
<tr>
<td>React</td>
<td>16.0.0</td>
</tr>
<tr>
<td>browser</td>
<td>IE11</td>
</tr>
</tbody>
</table>