<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">I should be able to edit the values of inputs inside of a modal.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">The input receives focus however, I am unable to edit the contents</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>

<p dir="auto">Demo:  <a href="https://codesandbox.io/s/73rov1z63j" rel="nofollow">https://codesandbox.io/s/73rov1z63j</a></p>
<ol dir="auto">
<li>Add an Input to a Modal</li>
<li>Open the Modal and try to edit the contents of said Input...</li>
</ol>
<h2 dir="auto">Context</h2>

<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.27</td>
</tr>
<tr>
<td>React</td>
<td>16.2.0</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome 63.0.3239.132</td>
</tr>
</tbody>
</table>
<p dir="auto">We discussed this already in chat with <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/nathanmarks/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/nathanmarks">@nathanmarks</a>. I thought it would be good to have a public discussion on this. My idea is to have a component property <code class="notranslate">variant</code> which can be used to define a styling variation.</p>
<p dir="auto">In case of a Button, raised or primary state can be implemented over a variant internally (and stay backwards compatible) as well.</p>
<p dir="auto">This opens a door for different use cases, where you have a button but slightly changed, for e.g. with a different color or without a border or anything else. Using a theme user can define a custom variation and pass the variant over the props.</p>
<p dir="auto">Example</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const theme = createMuiTheme({
  Button: {
    variants: {
      special: {
        root: {
          borderRadius: 0
        }
      }
    }
  }
})

&lt;ThemeProvider theme={theme}&gt;
  &lt;Button variant=&quot;special&quot;&gt;Special Button&lt;/Button&gt;
&lt;/themeProvider&gt;
"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">theme</span> <span class="pl-c1">=</span> <span class="pl-en">createMuiTheme</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">Button</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">variants</span>: <span class="pl-kos">{</span>
      <span class="pl-c1">special</span>: <span class="pl-kos">{</span>
        <span class="pl-c1">root</span>: <span class="pl-kos">{</span>
          <span class="pl-c1">borderRadius</span>: <span class="pl-c1">0</span>
        <span class="pl-kos">}</span>
      <span class="pl-kos">}</span>
    <span class="pl-kos">}</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>

<span class="pl-c1">&lt;</span><span class="pl-v">ThemeProvider</span> <span class="pl-s1">theme</span><span class="pl-c1">=</span><span class="pl-kos">{</span>theme<span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-ent">Button</span> <span class="pl-c1">variant</span><span class="pl-c1">=</span><span class="pl-s">"special"</span><span class="pl-c1">&gt;</span>Special Button<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Button</span><span class="pl-c1">&gt;</span>
<span class="pl-c1">&lt;</span><span class="pl-c1">/</span>themeProvider&gt;</pre></div>