validateReferenceBasedDeferredTrigger(block, trigger) {
  if (trigger.reference === null) {
    if (block.placeholder === null) {
      this.tcb.oobRecorder.deferImplicitTriggerMissingPlaceholder(this.tcb.id, trigger);
      return;
    }
    let rootNode = null;
    for (const child of block.placeholder.children) {
      if (!this.tcb.hostPreserveWhitespaces && child instanceof Text$3 && child.value.trim().length === 0) {
        continue;
      }
      if (rootNode === null) {
        rootNode = child;
      } else {
        rootNode = null;
        break;
      }
    }
    if (rootNode === null || !(rootNode instanceof Element$1)) {
      this.tcb.oobRecorder.deferImplicitTriggerInvalidPlaceholder(this.tcb.id, trigger);
    }
    return;
  }
  if (this.tcb.boundTarget.getDeferredTriggerTarget(block, trigger) === null) {
    this.tcb.oobRecorder.inaccessibleDeferredTriggerElement(this.tcb.id, trigger);
  }
}

function registerDomTrigger(initialLView, tNode, triggerIndex, walkUpTimes, registerFn, callback, type, options) {
  if (!shouldTriggerDeferBlock(type, initialLView)) {
    return;
  }
  const injector = initialLView[INJECTOR];
  const zone = injector.get(NgZone);
  let poll;
  function pollDomTrigger() {
    if (isDestroyed(initialLView)) {
      poll.destroy();
      return;
    }
    const lDetails = getLDeferBlockDetails(initialLView, tNode);
    const renderedState = lDetails[DEFER_BLOCK_STATE];
    if (renderedState !== DeferBlockInternalState.Initial && renderedState !== DeferBlockState.Placeholder) {
      poll.destroy();
      return;
    }
    const triggerLView = getTriggerLView(initialLView, tNode, walkUpTimes);
    if (!triggerLView) {
      return;
    }
    poll.destroy();
    // ... 要素を取り出して registerFn で購読する
  }
  poll = afterEveryRender({ read: pollDomTrigger }, { injector });
}

function getTriggerLView(deferredHostLView, deferredTNode, walkUpTimes) {
  if (walkUpTimes == null) {
    return deferredHostLView;
  }
  if (walkUpTimes >= 0) {
    return walkUpViews(walkUpTimes, deferredHostLView);
  }
  const deferredContainer = deferredHostLView[deferredTNode.index];
  ngDevMode && assertLContainer(deferredContainer);
  const triggerLView = deferredContainer[CONTAINER_HEADER_OFFSET] ?? null;
  // ...
  return triggerLView;
}

@if (hasFilters()) {
  <button #moreButton>絞り込みを追加</button>
}

@defer (on interaction(moreButton)) {
  <app-filter-editor />
} @placeholder {
  <div class="skeleton"></div>
}

@Reviewer: トリガーの `#moreButton` が `@if (hasFilters())` の中にあります。偽のあいだはボタンのビューが作られないため、この `@defer` はプレースホルダーのまま止まります。型検査は同じビューにあることだけを見るので通ってしまう形です。`@defer` ごと同じ `@if` の中に移してください。

function createIntersectionObserver(options) {
  const key = getIntersectionObserverKey(options);
  return new IntersectionObserver(entries => {
    for (const current of entries) {
      if (current.isIntersecting && viewportTriggers.has(current.target)) {
        viewportTriggers.get(current.target)?.get(key)?.listener();
      }
    }
  }, options);
}

if (!(parsed.ast instanceof LiteralMap)) {
  throw new Error('Options parameter of the "viewport" trigger must be an object literal');
} else if (parsed.ast.keys.some(key => key.kind === 'spread')) {
  throw new Error('Spread operator are not allowed in this context');
} else if (parsed.ast.keys.some(key => key.kind === 'property' && key.key === 'root')) {
  throw new Error('The "root" option is not supported in the options parameter of the "viewport" trigger');
}

const interactionEventNames = ['click', 'keydown'];
const hoverEventNames = ['mouseenter', 'mouseover', 'focusin'];

@Reviewer: `on interaction` のプレースホルダーが `
` です。購読されるのは `click` と `keydown` で、`keydown` は焦点のある要素から伝播するため、焦点を受け取れないこの `
` ではキーボード操作で開けません。`` に変えるか `tabindex="0"` を付けてください。

function shouldAttachRegularTrigger(lView, tNode) {
  const injector = lView[INJECTOR];
  const tDetails = getTDeferBlockDetails(lView[TVIEW$1], tNode);
  const incrementalHydrationEnabled = isIncrementalHydrationEnabled(injector);
  const _hasHydrateTriggers = hasHydrateTriggers(tDetails.flags);
  if (typeof ngServerMode !== 'undefined' && ngServerMode) {
    return !incrementalHydrationEnabled || !_hasHydrateTriggers;
  }
  const lDetails = getLDeferBlockDetails(lView, tNode);
  const wasServerSideRendered = lDetails[SSR_UNIQUE_ID] !== null;
  if (_hasHydrateTriggers && wasServerSideRendered && incrementalHydrationEnabled) {
    return false;
  }
  return true;
}

@defer (when ready(); hydrate on viewport) {
  <app-recommendations />
} @placeholder {
  <div class="placeholder-block"></div>
}

@Reviewer: `hydrate on interaction` を足した差分ですが、このアプリは `ng update` が挿入した `withNoIncrementalHydration()` が残っています。段階的ハイドレーションが無効なあいだ `hydrate` トリガーは見られないため、この指定は何もしません。退避を外す判断と合わせて進めてください。

const value = Boolean(rawValue);
const lDetails = getLDeferBlockDetails(lView, tNode);
const renderedState = lDetails[DEFER_BLOCK_STATE];
if (value === false && renderedState === DeferBlockInternalState.Initial) {
  renderPlaceholder(lView, tNode);
} else if (value === true && (renderedState === DeferBlockInternalState.Initial || renderedState === DeferBlockState.Placeholder)) {
  triggerDeferBlock(0, lView, tNode);
}

function shouldTriggerDeferBlock(triggerType, lView) {
  if (triggerType === 0 && typeof ngServerMode !== 'undefined' && ngServerMode) {
    return false;
  }
  const injector = lView[INJECTOR];
  const config = injector.get(DEFER_BLOCK_CONFIG, null, { optional: true });
  if (config?.behavior === DeferBlockBehavior.Manual) {
    return false;
  }
  return true;
}

@Reviewer: このテストは `deferBlockBehavior: DeferBlockBehavior.Manual` を共通の設定に置いたまま、プレースホルダーの `` を `click()` して本体が出ることを確かめています。`Manual` では DOM 系のトリガーが仕掛からないため、この期待は本体が出ないまま通っているはずです。トリガーの経路を確かめるテストでしたら既定の `Playthrough` に戻し、状態ごとの描画を確かめるテストだけ `Manual` と `DeferBlockFixture` に寄せてください。