angular/components · warning

Found multiple CdkOption representing the same value under t

Error message

Found multiple CdkOption representing the same value under the given compareWith function

What it means

CdkListbox requires each option to map to a unique value under its compareWith function; otherwise selection state (which stores values, not option instances) becomes ambiguous. During listbox validation, if two options compare equal via the provided compareWith, the listbox warns with both option elements and the compareWith function.

Source

Thrown at src/cdk/listbox/listbox.ts:994

  /** Verifies that no two options represent the same value under the compareWith function. */
  private _verifyNoOptionValueCollisions() {
    this.options.changes.pipe(startWith(this.options), takeUntil(this.destroyed)).subscribe(() => {
      const isEqual = this.compareWith ?? Object.is;
      for (let i = 0; i < this.options.length; i++) {
        const option = this.options.get(i)!;
        let duplicate: CdkOption<T> | null = null;
        for (let j = i + 1; j < this.options.length; j++) {
          const other = this.options.get(j)!;
          if (isEqual(option.value, other.value)) {
            duplicate = other;
            break;
          }
        }
        if (duplicate) {
          // TODO(mmalerba): Link to docs about this.
          if (this.compareWith) {
            console.warn(
              `Found multiple CdkOption representing the same value under the given compareWith function`,
              {
                option1: option.element,
                option2: duplicate.element,
                compareWith: this.compareWith,
              },
            );
          } else {
            console.warn(`Found multiple CdkOption with the same value`, {
              option1: option.element,
              option2: duplicate.element,
            });
          }
          return;
        }
      }
    });
  }

View on GitHub (pinned to 0411926e7d)

Solutions

1. Fix the compareWith function so it correctly distinguishes non-equal values (compare a unique key)
2. Ensure option values have unique identity keys in your data
3. Add validation upstream to de-duplicate data before rendering options

Example fix

// before
this.compareWith = (a, b) => a.id === b.id; // duplicate ids in data
// after
this.compareWith = (a, b) => a.id === b.id && a.type === b.type; // or de-dupe data by id

// before rendering options
const seen = [];
for (const v of optionValues) {
  if (seen.some(s => compareWith(s, v) === 0)) console.warn('Duplicate option value under compareWith');
  seen.push(v);
}

When it happens

Trigger: Two CdkOption components under a CdkListbox with [compareWith] set produce values that the compareWith function reports equal during the duplicate-check pass in CdkListbox validation.

Common situations: A compareWith that ignores distinguishing fields (e.g. only comparing id, but data contains duplicate ids); a compareWith that always returns true due to a bug (wrong property, reversed comparator); reusing the same value object for multiple options.

Related errors

• Found multiple CdkOption with the same value
• Listbox cannot have more than one selected value in single s
• Listbox has selected values that do not match any of its opt

AI-assisted analysis of angular/components@0411926e7d (2026-08-31). Data as JSON: /api/errors/2abefab9946a2d6e. Report an issue: GitHub.