<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/mui-org/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">Should display correct string.</p>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto">Displays <code class="notranslate">[Object object]</code></p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>

<p dir="auto">I am using <a href="https://github.com/yahoo/react-intl">react-int</a> library for internalisation, it woks really well with material-ui and only fails at placeholders i.e</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;TextField
  label={&lt;FormattedMessage id=&quot;index.email&quot; /&gt;}
  placeholder={&lt;FormattedMessage id=&quot;index.emailExample&quot; /&gt;}
  fullWidth
  margin=&quot;dense&quot;
  value={email}
  onChange={({ target }) =&gt; this.setState({ email: target.value })}
/&gt;"><pre class="notranslate"><code class="notranslate">&lt;TextField
  label={&lt;FormattedMessage id="index.email" /&gt;}
  placeholder={&lt;FormattedMessage id="index.emailExample" /&gt;}
  fullWidth
  margin="dense"
  value={email}
  onChange={({ target }) =&gt; this.setState({ email: target.value })}
/&gt;
</code></pre></div>
<p dir="auto">placeholder is displayed as <code class="notranslate">[Object object]</code>, this works fine for <code class="notranslate">label</code> in same field and things like Tabs.</p>
<h2 dir="auto">Context</h2>

<p dir="auto">Unable to internationalise placeholders properly.</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>beta 33</td>
</tr>
<tr>
<td>React</td>
<td>16.2</td>
</tr>
<tr>
<td>browser</td>
<td>all</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>
<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">Grid should be displayed as shown in image <a href="https://i.stack.imgur.com/jZBie.png" rel="nofollow">https://i.stack.imgur.com/jZBie.png</a><br>
Here is the code:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="        &lt;Grid container direction=&quot;column&quot; spacing={0}&gt;
          &lt;Grid item xs={12}&gt;
            &lt;Grid container direction=&quot;row&quot; spacing={0}&gt;
              &lt;Grid item xs={6}&gt;
                Logo
              &lt;/Grid&gt;
              &lt;Grid item xs={6}&gt;
                FormControl
              &lt;/Grid&gt;
            &lt;/Grid&gt;
          &lt;/Grid&gt;
          &lt;Grid item xs={12}&gt;
            &lt;Grid container direction=&quot;column&quot; spacing={0}&gt;
              &lt;Grid item xs={12}&gt;
                &lt;Grid container direction=&quot;row&quot; spacing={0}&gt;
                  &lt;Grid item xs={12}&gt;
                    &lt;TextField /&gt;
                  &lt;/Grid&gt;
                  &lt;Grid item xs={12}&gt;
                    &lt;TextField /&gt;
                  &lt;/Grid&gt;
                &lt;/Grid&gt;
              &lt;/Grid&gt;
              &lt;Grid item xs={12}&gt;
                &lt;Grid container direction=&quot;row&quot; spacing={0}&gt;
                  &lt;Grid item xs={6}&gt;
                    &lt;TextField /&gt;
                  &lt;/Grid&gt;
                  &lt;Grid item xs={6}&gt;
                    &lt;TextField /&gt;
                  &lt;/Grid&gt;
                &lt;/Grid&gt;
              &lt;/Grid&gt;
            &lt;/Grid&gt;
          &lt;/Grid&gt;
          &lt;Grid item xs={12}&gt;
            &lt;Grid container direction=&quot;row&quot; spacing={0}&gt;
              &lt;Grid item xs={6}&gt;
                Label
              &lt;/Grid&gt;
              &lt;Grid item xs={6}&gt;
                Label
              &lt;/Grid&gt;
            &lt;/Grid&gt;
          &lt;/Grid&gt;
        &lt;/Grid&gt;"><pre class="notranslate">        <span class="pl-c1">&lt;</span><span class="pl-ent">Grid</span> <span class="pl-c1">container</span> <span class="pl-c1">direction</span><span class="pl-c1">=</span><span class="pl-s">"column"</span> <span class="pl-c1">spacing</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">0</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-ent">Grid</span> <span class="pl-c1">item</span> <span class="pl-c1">xs</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">12</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
            <span class="pl-c1">&lt;</span><span class="pl-ent">Grid</span> <span class="pl-c1">container</span> <span class="pl-c1">direction</span><span class="pl-c1">=</span><span class="pl-s">"row"</span> <span class="pl-c1">spacing</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">0</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
              <span class="pl-c1">&lt;</span><span class="pl-ent">Grid</span> <span class="pl-c1">item</span> <span class="pl-c1">xs</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">6</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
                Logo
              <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Grid</span><span class="pl-c1">&gt;</span>
              <span class="pl-c1">&lt;</span><span class="pl-ent">Grid</span> <span class="pl-c1">item</span> <span class="pl-c1">xs</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">6</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
                FormControl
              <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Grid</span><span class="pl-c1">&gt;</span>
            <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Grid</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Grid</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-ent">Grid</span> <span class="pl-c1">item</span> <span class="pl-c1">xs</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">12</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
            <span class="pl-c1">&lt;</span><span class="pl-ent">Grid</span> <span class="pl-c1">container</span> <span class="pl-c1">direction</span><span class="pl-c1">=</span><span class="pl-s">"column"</span> <span class="pl-c1">spacing</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">0</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
              <span class="pl-c1">&lt;</span><span class="pl-ent">Grid</span> <span class="pl-c1">item</span> <span class="pl-c1">xs</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">12</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
                <span class="pl-c1">&lt;</span><span class="pl-ent">Grid</span> <span class="pl-c1">container</span> <span class="pl-c1">direction</span><span class="pl-c1">=</span><span class="pl-s">"row"</span> <span class="pl-c1">spacing</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">0</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
                  <span class="pl-c1">&lt;</span><span class="pl-ent">Grid</span> <span class="pl-c1">item</span> <span class="pl-c1">xs</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">12</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
                    <span class="pl-c1">&lt;</span><span class="pl-ent">TextField</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
                  <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Grid</span><span class="pl-c1">&gt;</span>
                  <span class="pl-c1">&lt;</span><span class="pl-ent">Grid</span> <span class="pl-c1">item</span> <span class="pl-c1">xs</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">12</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
                    <span class="pl-c1">&lt;</span><span class="pl-ent">TextField</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
                  <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Grid</span><span class="pl-c1">&gt;</span>
                <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Grid</span><span class="pl-c1">&gt;</span>
              <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Grid</span><span class="pl-c1">&gt;</span>
              <span class="pl-c1">&lt;</span><span class="pl-ent">Grid</span> <span class="pl-c1">item</span> <span class="pl-c1">xs</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">12</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
                <span class="pl-c1">&lt;</span><span class="pl-ent">Grid</span> <span class="pl-c1">container</span> <span class="pl-c1">direction</span><span class="pl-c1">=</span><span class="pl-s">"row"</span> <span class="pl-c1">spacing</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">0</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
                  <span class="pl-c1">&lt;</span><span class="pl-ent">Grid</span> <span class="pl-c1">item</span> <span class="pl-c1">xs</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">6</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
                    <span class="pl-c1">&lt;</span><span class="pl-ent">TextField</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
                  <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Grid</span><span class="pl-c1">&gt;</span>
                  <span class="pl-c1">&lt;</span><span class="pl-ent">Grid</span> <span class="pl-c1">item</span> <span class="pl-c1">xs</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">6</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
                    <span class="pl-c1">&lt;</span><span class="pl-ent">TextField</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
                  <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Grid</span><span class="pl-c1">&gt;</span>
                <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Grid</span><span class="pl-c1">&gt;</span>
              <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Grid</span><span class="pl-c1">&gt;</span>
            <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Grid</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Grid</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-ent">Grid</span> <span class="pl-c1">item</span> <span class="pl-c1">xs</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">12</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
            <span class="pl-c1">&lt;</span><span class="pl-ent">Grid</span> <span class="pl-c1">container</span> <span class="pl-c1">direction</span><span class="pl-c1">=</span><span class="pl-s">"row"</span> <span class="pl-c1">spacing</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">0</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
              <span class="pl-c1">&lt;</span><span class="pl-ent">Grid</span> <span class="pl-c1">item</span> <span class="pl-c1">xs</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">6</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
                Label
              <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Grid</span><span class="pl-c1">&gt;</span>
              <span class="pl-c1">&lt;</span><span class="pl-ent">Grid</span> <span class="pl-c1">item</span> <span class="pl-c1">xs</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">6</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
                Label
              <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Grid</span><span class="pl-c1">&gt;</span>
            <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Grid</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Grid</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Grid</span><span class="pl-c1">&gt;</span></pre></div>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">It is working well in chrome and firefox but in IE 11, everything overlaps and messes up.</p>
<h2 dir="auto">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.18</td>
</tr>
<tr>
<td>React</td>
<td>15.6.2</td>
</tr>
<tr>
<td>browser</td>
<td>IE 11, Chrome, Firefox</td>
</tr>
</tbody>
</table>