title: React Material-UI Chip's onDelete inside Select is not working
body: <p>I followed the Chips example here, in order to render chips as the renderValue of the Select:</p>
  
  <p><a href="https://material-ui.com/components/selects/" rel="noreferrer">https://material-ui.com/components/selects/</a></p>
  
  <p>However, when I added onDelete to the chip, in order to delete the chip in one click, I can see the close icon, but <strong>the delete event is not invoked</strong> (because the menu of Select shows).</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;Select
          multiple
          value={selectedProducts}
          onChange={handleProductsSearchChange}
          renderValue={selected =&gt; (
              &lt;div className={classes.chips}&gt;
              {selected.map(value =&gt; (
                  &lt;Chip key={value} label={find(FAKE_PRODUCTS, {id: value}).name}
                          onDelete={() =&gt; handleDeleteSearchProduct(value)} 
                          className={classes.chip} /&gt;
                  ))}
              &lt;/div&gt;)}
          MenuProps={{ PaperProps: {
              style: {
                  maxHeight: 48 * 4.5 + 8,
                  width: 250,
              }
          }
  }}
  &gt;
  {menuItems}
  &lt;/Select&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When I put the chip outside of the select, the delete event is invoked.
  What do you think I can do in order to prevent the behaviour of the menu opening on click?</p>
  
  <p>Thank you very much!</p>