Function observeSelectMutations

packages/forms/signals/src/directive/select.ts:19–45

(
  select: HTMLSelectElement,
  onMutation: () => void,
  destroyRef: DestroyRef,
)

 * @return The newly created `MutationObserver`.
 */
export function observeSelectMutations(
  select: HTMLSelectElement,
  onMutation: () => void,
  destroyRef: DestroyRef,
): void {
  if (typeof MutationObserver !== 'function') {
    // Observing mutations is best-effort.
    return;
  }

  const observer = new MutationObserver((mutations) => {
    if (mutations.some((m) => isRelevantSelectMutation(m))) {
      onMutation();
    }
  });
  observer.observe(select, {
    attributes: true,
    attributeFilter: ['value'],
    // We watch the character data, because an `<option>` with no explicit `value` property set uses
    // its text content as its value.
    // (See https://developer.mozilla.org/en-US/docs/Web/API/HTMLOptionElement/value)
    characterData: true,
    childList: true,
    subtree: true,
  });
  destroyRef.onDestroy(() => observer.disconnect());
}

/**
 * Checks if a given mutation record is relevant for resyncing a <select>.