<p dir="auto">Currently I have an <code class="notranslate">Input</code> sitting inside the <code class="notranslate">label</code> of a <code class="notranslate">Chip</code>, and the way "backspace" is handled causes several issues with this text input. I'm able to stop the <code class="notranslate">onDelete</code> function being called, but cannot fix the fact <code class="notranslate">Input</code> is never getting an event.</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/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 would prefer <code class="notranslate">Chip</code> not handle "backspace" <code class="notranslate">keydown</code> events, but if this is desired functionality, being able to override the <code class="notranslate">onKeyDown</code> event unconditionally would suffice.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">The default event is prevented and the <code class="notranslate">onChange</code> function is never called.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">I spun this up to demo the issue:<br>
<a href="https://codesandbox.io/s/42708vl2l9" rel="nofollow">https://codesandbox.io/s/42708vl2l9</a></p>
<h2 dir="auto">Context</h2>
<p dir="auto">I'm creating a filter system for a desktop-only application, where the filters are editable and represented by <code class="notranslate">Chip</code>s. Currently these filters are pretty simple, so editing them inline is pretty clean and simple from a user perspective.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/1010165/36327093-7dc1212c-132b-11e8-8222-6fe5fca081cd.png"><img src="https://user-images.githubusercontent.com/1010165/36327093-7dc1212c-132b-11e8-8222-6fe5fca081cd.png" alt="screen shot 2018-02-16 at 15 09 58" style="max-width: 100%;"></a></p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/1010165/36327116-91a4743c-132b-11e8-9da0-b481361abbb4.png"><img src="https://user-images.githubusercontent.com/1010165/36327116-91a4743c-132b-11e8-9da0-b481361abbb4.png" alt="screen shot 2018-02-16 at 15 10 34" style="max-width: 100%;"></a></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>1.0.0-beta.32</td>
</tr>
<tr>
<td>React</td>
<td>16.2.0</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome</td>
</tr>
</tbody>
</table>
<p dir="auto">This mixin appears in many components, checking if <code class="notranslate">context.muiTheme</code> has changed.</p>
<p dir="auto">First of all, I do not see why this component is necessary besides supporting dynamic theme. This can be done by creating a new theme context instance, React will then tell it has been changed.</p>
<p dir="auto">Moreover, Its appearance may significantly affect the performance since it does checking in <code class="notranslate">shouldComponentUpdate</code> every time react does reconciliation. Especially, this happens for every flat button and text field.</p>
<p dir="auto">Last, but may not relate to this issue, context-pure mixin uses <code class="notranslate">src/utils/shallow-equal.js</code>, the same function has been implemented as react addon <code class="notranslate">react-addons-shallow-compare</code>. I think we should remove it from <code class="notranslate">utils</code>.</p>
<p dir="auto">Here is the sublime search result:</p>
<h2 dir="auto"></h2>
<p dir="auto">Edit by <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> (replaced <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/yongxu/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/yongxu">@yongxu</a> sublime search results with checklist)</p>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> flat-button-label.jsx (<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="133489916" data-permission-text="Title is private" data-url="https://github.com/mui/material-ui/issues/3331" data-hovercard-type="pull_request" data-hovercard-url="/mui/material-ui/pull/3331/hovercard" href="https://github.com/mui/material-ui/pull/3331">#3331</a>)</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> card-expandable.jsx (<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="133489916" data-permission-text="Title is private" data-url="https://github.com/mui/material-ui/issues/3331" data-hovercard-type="pull_request" data-hovercard-url="/mui/material-ui/pull/3331/hovercard" href="https://github.com/mui/material-ui/pull/3331">#3331</a>)</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> date-picker-dialog.jsx (<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="133489916" data-permission-text="Title is private" data-url="https://github.com/mui/material-ui/issues/3331" data-hovercard-type="pull_request" data-hovercard-url="/mui/material-ui/pull/3331/hovercard" href="https://github.com/mui/material-ui/pull/3331">#3331</a>)</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> flat-button.jsx (<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="133489916" data-permission-text="Title is private" data-url="https://github.com/mui/material-ui/issues/3331" data-hovercard-type="pull_request" data-hovercard-url="/mui/material-ui/pull/3331/hovercard" href="https://github.com/mui/material-ui/pull/3331">#3331</a>)</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> icon-button.jsx (<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="133489916" data-permission-text="Title is private" data-url="https://github.com/mui/material-ui/issues/3331" data-hovercard-type="pull_request" data-hovercard-url="/mui/material-ui/pull/3331/hovercard" href="https://github.com/mui/material-ui/pull/3331">#3331</a>)</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> SelectField.jsx (<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="133489916" data-permission-text="Title is private" data-url="https://github.com/mui/material-ui/issues/3331" data-hovercard-type="pull_request" data-hovercard-url="/mui/material-ui/pull/3331/hovercard" href="https://github.com/mui/material-ui/pull/3331">#3331</a>)</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> snackbar.jsx (<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="133489916" data-permission-text="Title is private" data-url="https://github.com/mui/material-ui/issues/3331" data-hovercard-type="pull_request" data-hovercard-url="/mui/material-ui/pull/3331/hovercard" href="https://github.com/mui/material-ui/pull/3331">#3331</a>)</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> TextField.jsx (<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="133489916" data-permission-text="Title is private" data-url="https://github.com/mui/material-ui/issues/3331" data-hovercard-type="pull_request" data-hovercard-url="/mui/material-ui/pull/3331/hovercard" href="https://github.com/mui/material-ui/pull/3331">#3331</a>)</li>
</ul>