<p dir="auto">Basically while porting from the old version I get lots of errors while using standard react HTML element properties. For example, whenever I try to add a title property to a button (to get a native tooltip) I get an error. While using tabIndex={-1} on it to avoid focusing via the tab key I get an error. While creating my own component that uses ButtonProps as a base I get that the style property is not defined and so on.</p>
<p dir="auto">v0.xx types were ok in this regard since they extend their props with extends React.HTMLAttributes&lt;{}&gt; to get this behavior right (although it also meant that it got lots of potentionally invalid properties inserted into the type).</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">TS should not complain if we try to use standard html properties such as title and so on.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">TS complains that these properties do not exist.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">As an example:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="  &lt;IconButton title='asdf' tabIndex={-1}/&gt;"><pre class="notranslate"><code class="notranslate">  &lt;IconButton title='asdf' tabIndex={-1}/&gt;
</code></pre></div>
<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>latest beta</td>
</tr>
<tr>
<td>React</td>
<td>15</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome 60</td>
</tr>
<tr>
<td>TS</td>
<td>2.5.2</td>
</tr>
</tbody>
</table>
<p dir="auto">We need to discuss how will we standardize the callbacks that some component take in order to behave in a controllable fashion. But since the signature of the callback function they accept is different across components, many new comers get confused.</p>
<p dir="auto">Therefore, we have to come to a solution on this.</p>
<h3 dir="auto">My proposal:</h3>
<ol dir="auto">
<li>Every controllable component should only be controlled via <code class="notranslate">value</code> and <code class="notranslate">onChange</code> props. No more <code class="notranslate">onRequestXxx</code>.</li>
<li>the <code class="notranslate">value</code> must be as versatile as possible, if it make sense for it to be anything equatable with <code class="notranslate">===</code> then it should be marked as any.</li>
<li>The value should NOT be treated as <code class="notranslate">falsy</code> EVER! Implicit coercion leads to many many bugs.</li>
<li>The signature of the callback must follow this pattern: <code class="notranslate">(e: Event, v: value, ...rest: any[]) =&gt; void</code></li>
<li>If access to the event is granted, there really shouldn't be any reason to provide a <code class="notranslate">reason</code> argument to indicate what triggered the change. The event can be checked against it's type or it's properties. I think this could be more accurate. (debatable <g-emoji class="g-emoji" alias="grin" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f601.png">😁</g-emoji> )</li>
</ol>
<p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/oliviertassinari/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/oliviertassinari">@oliviertassinari</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/newoga/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/newoga">@newoga</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/mbrookes/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/mbrookes">@mbrookes</a> Tell me what you guys think <g-emoji class="g-emoji" alias="grin" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f601.png">😁</g-emoji></p>
<h3 dir="auto">The Roadmap:</h3>
<h4 dir="auto">1. Standardize The Following Components:</h4>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> <code class="notranslate">DatePicker: onChange(event, date)</code></li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> <code class="notranslate">DropDownMenu onChange(event, key, payload) =&gt; onChange(event, value, index)</code>, index?</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> <code class="notranslate">IconMenu (event, value)</code></li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> <code class="notranslate">Drawer (deprecated prop) onChange(event, key, payload) =&gt; onChange(event, state)</code></li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> <code class="notranslate">RadioButtonGroup onChange(event, newSelection)</code></li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> <code class="notranslate">SelectField, DropDownMenu onChange(event, index, value) =&gt; onChange(event, value, index)</code></li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> <code class="notranslate">Slider onChange(event, value)</code></li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> <code class="notranslate">Tabs onChange(value) =&gt; onChange(event, value)</code> <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="249810352" data-permission-text="Title is private" data-url="https://github.com/mui/material-ui/issues/7741" data-hovercard-type="pull_request" data-hovercard-url="/mui/material-ui/pull/7741/hovercard" href="https://github.com/mui/material-ui/pull/7741">#7741</a></li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> <code class="notranslate">TextField onChange(event) =&gt; onChange(event, value)</code> <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="140966674" data-permission-text="Title is private" data-url="https://github.com/mui/material-ui/issues/3699" data-hovercard-type="pull_request" data-hovercard-url="/mui/material-ui/pull/3699/hovercard" href="https://github.com/mui/material-ui/pull/3699">#3699</a></li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> <code class="notranslate">TimePicker onChange(null, time) =&gt; onChange(event, time)</code></li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> <code class="notranslate">Table</code> (<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="127914366" data-permission-text="Title is private" data-url="https://github.com/mui/material-ui/issues/3002" data-hovercard-type="pull_request" data-hovercard-url="/mui/material-ui/pull/3002/hovercard" href="https://github.com/mui/material-ui/pull/3002">#3002</a>)</li>
</ul>
<h4 dir="auto">2. Purge State:</h4>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> Create a stateful <code class="notranslate">StateWrapper</code> components that can be used to make components stateful, useful for forms. It must implement: <code class="notranslate">getValue()</code>, <code class="notranslate">setValue(value)</code>, <code class="notranslate">clearValue()</code>, <code class="notranslate">defaultValue prop</code>, <code class="notranslate">onChange prop: (event, value, ...rest) =&gt; void</code></li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Clear state from all components that can be stateless. As much as possible.</li>
</ul>
<h3 dir="auto">3. Documentation and deployment:</h3>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Figure out a way to make usage less pain full, something like:</li>
</ul>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import SelectField from 'material-ui/lib/SelectField'; // For the actual component
// As opposed to:
import SelectField from 'material-ui/lib/SelectField/stateful'; // For the stateful version component"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">SelectField</span> <span class="pl-k">from</span> <span class="pl-s">'material-ui/lib/SelectField'</span><span class="pl-kos">;</span> <span class="pl-c">// For the actual component</span>
<span class="pl-c">// As opposed to:</span>
<span class="pl-k">import</span> <span class="pl-v">SelectField</span> <span class="pl-k">from</span> <span class="pl-s">'material-ui/lib/SelectField/stateful'</span><span class="pl-kos">;</span> <span class="pl-c">// For the stateful version component</span></pre></div>
<p dir="auto">This is easy to implement, but I don't know if we want this, we should discuss this too.</p>