title: Using debounceTime & distinctUntilChanged is not working when subscribing to FormBuilder valueChanges
body: <p>very simply put, I want to perform a query after the user stops typing for a set amount of time. Every tutorial I've seen using <code>FormBuilder</code> suggests subscribing to <code>valueChanges</code> of the input field, while piping <code>debounceTime</code> and <code>distinctUntilChanged</code>. </p>
  
  <pre><code>this.threadForm.get('body').valueChanges.pipe(
              debounceTime(500),
              distinctUntilChanged(),
              mergeMap(search =&gt; this.db.query$(...)`))
        )
  </code></pre>
  
  <p>I cannot get this to work correctly. It appears to debounce the time properly, but when it gets piped through, it sends multiple of the final result (which distinctUntilChanged should handle). What am I doing wrong?</p>
  
  <p>Here's a quick video of the problem (I added a <code>tap</code> so you can see that the webpage is logging several of the final result):</p>
  
  <p><a href="https://streamable.com/h2him" rel="nofollow noreferrer">https://streamable.com/h2him</a></p>
  
  <p>Thanks!</p>
  
  <p><strong>EDIT: Adding surrounding code</strong> the <code>source</code> function is run on each key click as well so I think that I'm instantiating multiple observables regardless of my debouncing. How can I add debounce logic within this?</p>
  
  <pre><code>  source: (searchTerm, renderList) =&gt; {
      //searchTerm is triggered on every button click
      if (searchTerm.length === 0) {
        renderList(this.mentions, searchTerm)
      } else {
        //are multiple instances of this observable being made??
        this.threadForm.get('body').valueChanges.pipe(
          distinctUntilChanged(),
          debounceTime(500),
          tap(x =&gt; console.log(x)),
          switchMap(search =&gt; this.db.query$(`user/collection?like=username_${searchTerm}&amp;limit=5`))
        ).subscribe( x =&gt; {
          console.log(x)
        });
      }
    },
  </code></pre>