<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">If the "Collapse" transition has finished, the content / children should be in the final position / layout.</p>
<p dir="auto">To Reproduce you need the following composition:<br>
A Collapse with an Input inside, which has a IconButton as Adornment.<br>
Without the IconButton, everything works fine.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">After the transition, the input jumps a little bit downwards, when you are enter the first character.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto"><a href="https://codesandbox.io/s/l3rvkxkvr7" rel="nofollow">https://codesandbox.io/s/l3rvkxkvr7</a></p>
<ol dir="auto">
<li>click on button collapse</li>
<li>enter a character</li>
<li>input is moving / jumping around</li>
</ol>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/2846460/36035031-13140b3e-0db6-11e8-94b6-606d75cc16e5.gif"><img src="https://user-images.githubusercontent.com/2846460/36035031-13140b3e-0db6-11e8-94b6-606d75cc16e5.gif" alt="collapse - input with iconbutton as adornment" data-animated-image="" style="max-width: 100%;"></a></p>
<h2 dir="auto">Context</h2>
<h2 dir="auto">Your Environment</h2>
<p dir="auto">material-ui@1.0.0-beta.32<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/2846460/36034758-620d7ffa-0db5-11e8-8b76-64209c018ed6.png"><img src="https://user-images.githubusercontent.com/2846460/36034758-620d7ffa-0db5-11e8-8b76-64209c018ed6.png" alt="image" style="max-width: 100%;"></a></p>
<h3 dir="auto">Description</h3>
<p dir="auto">I have a hard time indicating that the website is making a server request and the user might wait and at the same time prevent the user from clicking login again. Some of our users repeatedly click login if the server responds slowly.</p>
<p dir="auto">It cloud be an excellent feature if the button could expect at "loading" prop. When the button is passed loading={true} it should disable interaction and indicate it is loading.</p>
<p dir="auto">I am currently using material-ui@next in a project which is planned to be put into production soon :-) Great progress :-)!</p>
<h3 dir="auto">Images &amp; references</h3>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/16625262/27483612-72828866-5826-11e7-841c-36602d2460de.png"><img src="https://user-images.githubusercontent.com/16625262/27483612-72828866-5826-11e7-841c-36602d2460de.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/16625262/27483599-654b8828-5826-11e7-9fbf-0c314f082bc8.png"><img src="https://user-images.githubusercontent.com/16625262/27483599-654b8828-5826-11e7-9fbf-0c314f082bc8.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">Screenshots is taken from <a href="https://vuetifyjs.com/components/buttons" rel="nofollow">https://vuetifyjs.com/components/buttons</a> (Loaders section).</p>