How to execute dom manipulation from a subscriber without side effect RxJS?

Question

Scenario

I have a web component where the DOM manipulation is handled internally and not exposed to the outside world. The outside world has access to a stream that the web component provides.

Every time the web component emits a valid value, internally it should clear the value from the input component. However, this appears to have side effect on the stream.

Questions

Why does this happen?
How can clear subscription be defined without side effect on other subscribers?

Code

const logExternally = createFakeComponentStream()
  .subscribe(logValue);

function createFakeComponentStream() {
  const inputStream = Rx.Observable.fromEvent(
      document.querySelector("[name='input']"),
      'keyup')
    .filter(event => /enter/i.test(event.key));

  const valueStream = inputStream
    .pluck('srcElement', 'value');
    
  const logInternally = valueStream.subscribe(logValue);

  const clearOnInput = inputStream
    .pluck('srcElement')
    .subscribe(clearInput);

  return valueStream;
}


function clearInput(input) {
  input.value = '';
}

function logValue(value) {
  if (value) {
    console.log('Success:', value);
  } else {
    console.log('Failed:', value);
  }
}

Expected Output

Success: asdf
Success: asdf

Actual Output

Success: asdf
Failed: