angular/components · warning

Found multiple CdkOption with the same value

Error message

Found multiple CdkOption with the same value

What it means

This is the default-branch variant of the duplicate-option warning: when no compareWith is supplied, CdkListbox compares option values directly (e.g. by ===/string equality) and warns if two CdkOptions have the same value, since selection by value would be ambiguous.

Source

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

          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;
        }
      }
    });
  }

  /** Verifies that the option values are valid. */
  private _verifyOptionValues() {
    if (this.options && (typeof ngDevMode === 'undefined' || ngDevMode)) {
      const selected = this.selectionModel.selected;
      const invalidValues = this._getInvalidOptionValues(selected);

      if (!this.multiple && selected.length > 1) {
        throw Error('Listbox cannot have more than one selected value in single selection mode.');

View on GitHub (pinned to 0411926e7d)

Solutions

1. Give each cdkOption a unique [value]
2. De-duplicate the data source before rendering options
3. If values are legitimately equal-shaped objects, provide a proper [compareWith] and ensure it distinguishes them

Example fix

// before
<option [value]="'us'">US</option>
<option [value]="'us'">USA</option>
// after
<option [value]="'us'">US</option>
<option [value]="'usa'">USA</option>

const values = options.map(o => o.value);
const dupes = values.filter((v, i) => values.indexOf(v) !== i);
if (dupes.length) console.warn('Duplicate option values:', dupes);

When it happens

Trigger: Two CdkOption components inside a CdkListbox (no compareWith set) have identical values during listbox validation, hitting the else-branch console.warn with both option elements.

Common situations: Static templates repeating the same option value; data with duplicate keys rendered into options; typos causing two labels to share one value.

Related errors

• Found multiple CdkOption representing the same value under t
• 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/2ea3567e3e6fd004. Report an issue: GitHub.