<p dir="auto">When a LeftNav is closed, it is not hidden but simply <code class="notranslate">translateX</code> to somewhere out of the screen. However, the focus state of the button in the LeftNav is still active, this will cause some confused behavior for end users.</p>
<p dir="auto">A simple test case is as following</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="class TestExample extends React.Component {
    constructor() {
        super();
        this.state = { open: false };
    }
    closeNav() {
        this.setState({ open: false });
        console.log('click triggered');
    }
    render() {
        return (
            &lt;Paper&gt;
                &lt;RaisedButton label=&quot;New form&quot; onClick={() =&gt; this.setState({ open: true })}/&gt;
                &lt;LeftNav open={this.state.open}&gt;
                    &lt;RaisedButton label=&quot;Submit form&quot; onClick={() =&gt; this.closeNav}/&gt;
                &lt;/LeftNav&gt;
            &lt;/Paper&gt;
        );
    }
}"><pre class="notranslate"><code class="notranslate">class TestExample extends React.Component {
    constructor() {
        super();
        this.state = { open: false };
    }
    closeNav() {
        this.setState({ open: false });
        console.log('click triggered');
    }
    render() {
        return (
            &lt;Paper&gt;
                &lt;RaisedButton label="New form" onClick={() =&gt; this.setState({ open: true })}/&gt;
                &lt;LeftNav open={this.state.open}&gt;
                    &lt;RaisedButton label="Submit form" onClick={() =&gt; this.closeNav}/&gt;
                &lt;/LeftNav&gt;
            &lt;/Paper&gt;
        );
    }
}
</code></pre></div>
<p dir="auto">Suppose the users click the "New form" button, which opens the LeftNav, and they click "Submit form" after some operation, if exists. The leftNav will be hidden obviously, however, after it is closed, if the user unexpectedly press key <code class="notranslate">ENTER</code> or <code class="notranslate">SPACE</code>, they will find the form is submitted again as the button is still focused. (in our case there will be duplicated "click triggered" in the console log)</p>
<p dir="auto">This behavior is expected with the specs but not the users.</p>
<p dir="auto">Currently the workaround is to manipulate the <code class="notranslate">disableKeyboardFocus</code> property of EnhancedButton when the form is closed after <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="127841730" data-permission-text="Title is private" data-url="https://github.com/mui/material-ui/issues/3000" data-hovercard-type="pull_request" data-hovercard-url="/mui/material-ui/pull/3000/hovercard" href="https://github.com/mui/material-ui/pull/3000">#3000</a> is merged.</p>
<p dir="auto">When composing a textfield with <code class="notranslate">FormControl</code>, <code class="notranslate">InputLabel</code> and <code class="notranslate">Input</code>. The placeholder is hidden even when <code class="notranslate">shrink</code> is set to <code class="notranslate">true</code> on <code class="notranslate">InputLabel</code>. <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="251187858" data-permission-text="Title is private" data-url="https://github.com/mui/material-ui/issues/7821" data-hovercard-type="issue" data-hovercard-url="/mui/material-ui/issues/7821/hovercard" href="https://github.com/mui/material-ui/issues/7821">#7821</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">Composing an input like this:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;FormControl &gt;
  &lt;InputLabel htmlFor=&quot;my-input&quot; shrink&gt;
    The label
  &lt;/InputLabel&gt;
  &lt;Input
    id=&quot;my-input&quot;
    placeholder=&quot;Placeholder&quot;
  /&gt;
&lt;/FormControl&gt;"><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-ent">FormControl</span> <span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-ent">InputLabel</span> <span class="pl-c1">htmlFor</span><span class="pl-c1">=</span><span class="pl-s">"my-input"</span> <span class="pl-c1">shrink</span><span class="pl-c1">&gt;</span>
    The label
  <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">InputLabel</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-ent">Input</span>
    <span class="pl-c1">id</span><span class="pl-c1">=</span><span class="pl-s">"my-input"</span>
    <span class="pl-c1">placeholder</span><span class="pl-c1">=</span><span class="pl-s">"Placeholder"</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">FormControl</span><span class="pl-c1">&gt;</span></pre></div>
<p dir="auto">Should display a placeholder at all times, like a regular input (except with content in it).</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">The placeholder is only shown on focus.</p>
<h2 dir="auto">Context</h2>
<p dir="auto">I am personally not a fan of material-ui's label animation, it confuses our users, and it's not clear to them that this is an input where they can type something.</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>next</td>
</tr>
</tbody>
</table>
<p dir="auto">An attempt at a solution could use the suggestion by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/robert-figshare/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/robert-figshare">@robert-figshare</a>. Adding this sort of css to the <code class="notranslate">Input</code> component (not sure how to apply the JSS <code class="notranslate">shrink</code> class):</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="input: {
  'label.shrink + $formControl &amp;': {
    placeholder: { opacity: 0.5 }
  },
},"><pre class="notranslate"><code class="notranslate">input: {
  'label.shrink + $formControl &amp;': {
    placeholder: { opacity: 0.5 }
  },
},
</code></pre></div>