SkipUntil with params from observable chain

Question

I have an observable chain that creates an object and then waits for user input until it continues, i.e. something like this:

of(document.createElement("button"))
  .pipe(
    switchMap((button) =>
      fromEvent(button, "click").pipe(
        switchMap(() => doSomething(button))
      )
    )
  )
  .subscribe();

I´m being forced to indent my chain in order to still have access to button. Instead I´d rather keep my chain on the top level, which I tried with skipUntil:

of(document.createElement("button"))
  .pipe(
    skipUntil((button) => fromEvent(button, "click")),
    switchMap((button) => doSomething(button))
  )
  .subscribe();

Sadly skipUntil doesn´t take a function but only an observable. Therefore I can´t seem to pass my button object to it.

Is there another way to make this work?

Answer 1

Try this:

of(document.createElement("button"))
  .pipe(
    mergeMap(button => 
      fromEvent(button, "click").pipe(
        startWith(null),
        pairwise(),     
        filter(([prev, curr]) => prev === null && curr instanceof Event),
        switchMap(() => doSomething(button))
      )
    )
  )
  .subscribe();