title: RxJS mouseenter between first and second clicks
body: <p>I am trying to capture hover events on a list of items between the first and second clicks of any of items in the list. </p>
  
  <p>E.g.</p>
  
  <ul>
  <li>User clicks item in list</li>
  <li>Hover stream items emits event</li>
  <li>User performs second click in list and hover events stop</li>
  </ul>
  
  <p>I have setup an observable stream as follows:</p>
  
  <pre><code>let items = document.getElementsByClassName("item");
  let itemClicks = Rx.Observable.fromEvent(items, "click");
  let itemHover = Rx.Observable.fromEvent(items, "mouseenter");
  
  let clicksWithFlag = itemClicks.scan((acc, val) =&gt; ({ val: val.target.innerHTML, firstClick: !acc.firstClick}), {});
  
  //create stream of 1st clicks
  let firstClicks = clicksWithFlag.filter(x =&gt; x.firstClick).pluck('val');
  //create stream of second clicks
  let secondClicks = clicksWithFlag.filter(x =&gt; !x.firstClick).pluck('val');
  
  let hoverBetweenFirstAndSecondClick = firstClicks.flatMap(x =&gt; itemHover.takeUntil(secondClicks));
  </code></pre>
  
  <p>The problem I am running into is the <code>itemHover.takeUntil(secondClicks)</code> doesn't end the itemHover stream. I think it's related to firstClicks and secondClicks stemming from the same observable, but can't figure it out.</p>
  
  <p>It works if I swap the takeUntil(secondClicks) for any other stream (e.g. a stop button).</p>
  
  <p>See this JSBin for an example: <a href="https://jsbin.com/dotapis/edit?js,console,output" rel="nofollow noreferrer">https://jsbin.com/dotapis/edit?js,console,output</a></p>
  
  <p>Hope somebody can help. I am trying to build a range selector using RxJS, but am starting to think that splitting the stream into first and second clicks may not be the best route.</p>
  
  <h2>Update</h2>
  
  <p>Just tried this with BaconJS and I can get it working with pretty much the exact same code. <a href="https://jsbin.com/fobumu/edit?js,console,output" rel="nofollow noreferrer">https://jsbin.com/fobumu/edit?js,console,output</a></p>
  
  <p>I'm convinced the problem lies in non-idiomatic use of streams, but not sure why.</p>