title: Handling focus with react-select
body: <p>I'm trying to figure out how to work around what appears to be greedy-focus issues with <code>react-select</code>.</p>
  
  <p>I'm using custom components in my <code>MenuList</code> component that need the focus to work (<code>rc-slider</code>). Basically, I'd like the select to support an additional value for each <code>option</code> and I'm using a <code>Slider</code> to do that.</p>
  
  <p><a href="https://i.stack.imgur.com/B3INV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/B3INV.png" alt="enter image description here"></a></p>
  
  <p>The issue with the sliders is that I can click on them to change the value, but can't drag the handles, as the <code>Select</code> seems to take back the focus (and even close the drop-down if <code>menuIsOpen</code> is not controlled).</p>
  
  <p>The select does need to re-render when the values change, but I can't figure out why the focus has to change.</p>
  
  <p><a href="https://codesandbox.io/s/epic-moon-cv33b" rel="nofollow noreferrer">https://codesandbox.io/s/epic-moon-cv33b</a></p>