{"record":{"id":"24e8d803bb394f96","repo":"angular/components","slug":"attempting-to-clear-an-invalid-element","errorCode":null,"errorMessage":"Attempting to clear an invalid element","messagePattern":"Attempting to clear an invalid element","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"src/cdk/testing/testbed/unit-test-element.ts","lineNumber":83,"sourceCode":"};\n\n/** A `TestElement` implementation for unit tests. */\nexport class UnitTestElement implements TestElement {\n  constructor(\n    readonly element: Element,\n    private _stabilize: () => Promise<void>,\n  ) {}\n\n  /** Blur the element. */\n  async blur(): Promise<void> {\n    triggerBlur(this.element as HTMLElement);\n    await this._stabilize();\n  }\n\n  /** Clear the element's input (for input and textarea elements only). */\n  async clear(): Promise<void> {\n    if (!isTextInput(this.element)) {\n      throw Error('Attempting to clear an invalid element');\n    }\n    clearElement(this.element);\n    await this._stabilize();\n  }\n\n  /**\n   * Click the element at the default location for the current environment. If you need to guarantee\n   * the element is clicked at a specific location, consider using `click('center')` or\n   * `click(x, y)` instead.\n   */\n  click(modifiers?: ModifierKeys): Promise<void>;\n  /** Click the element at the element's center. */\n  click(location: 'center', modifiers?: ModifierKeys): Promise<void>;\n  /**\n   * Click the element at the specified coordinates relative to the top-left of the element.\n   * @param relativeX Coordinate within the element, along the X-axis at which to click.\n   * @param relativeY Coordinate within the element, along the Y-axis at which to click.\n   * @param modifiers Modifier keys held while clicking","sourceCodeStart":65,"sourceCodeEnd":101,"githubUrl":"https://github.com/angular/components/blob/0411926e7d8ae06b32236ec1048a888cfad5abf2/src/cdk/testing/testbed/unit-test-element.ts#L65-L101","documentation":"UnitTestElement.clear() only supports text input and textarea elements (isTextInput check). Calling clear() on any other element type throws immediately before touching the DOM. This is a deliberate restriction of the harness TestElement contract.","triggerScenarios":"element.clear() on a div/button/select/contenteditable or an input[type=checkbox|radio|number-with-non-text] that isTextInput rejects; casting a generic TestElement and calling clear without knowing the tag.","commonSituations":"Trying to clear a select dropdown; clearing a contenteditable rich-text editor; clearing a date input whose type is not classified as a text input; harness code shared across components where the host element differs.","solutions":["Only call clear() on input[type=text-like] or textarea elements","For selects, set value via selectOption-style APIs or dispatch change events instead","For contenteditable, set innerText/innerHTML via dispatchEvent or use a custom TestElement method","Check the element type first: (el as any).element instanceof HTMLInputElement or read el.attributes before calling clear"],"exampleFix":"// before\nawait testElement.clear(); // throws for select/contenteditable\n// after\nconst tag = await testElement.matches('input, textarea')\n  ? await testElement.getAttribute('type')\n  : null;\nif (testElementMatchesTextInput) {\n  await testElement.clear();\n} else {\n  await testElement.setProperty('value', '');\n  await testElement.dispatchEvent('input');\n}","handlingStrategy":"validation","validationCode":"const isTextInputEl = async (el: TestElement) => {\n  const tag = (await (el as any).element) ? (el as any).element.tagName : await el.matches('input, textarea');\n  return /INPUT|TEXTAREA/.test(tag);\n};\nif (await isTextInputEl(el)) { await el.clear(); }","typeGuard":"function isTextInputElement(el: HTMLElement): el is HTMLInputElement | HTMLTextAreaElement {\n  return el instanceof HTMLTextAreaElement ||\n    (el instanceof HTMLInputElement &&\n      ['text','search','url','tel','password','email'].includes(el.type));\n}","tryCatchPattern":"try {\n  await el.clear();\n} catch (e) {\n  if ((e as Error).message.includes('clear an invalid element')) {\n    await el.setProperty('value', '');\n    await el.dispatchEvent('input');\n  } else { throw e; }\n}","preventionTips":["Inspect the host element tag/type before calling clear()","Use specialized harness methods for selects and non-text inputs","Centralize input-clearing logic behind a helper that guards element type","Document that clear() only supports text inputs and textareas"],"tags":["testing","angular-cdk","dom","invalid-argument"],"backgroundTag":"invalid-element-operation","analyzedSha":"0411926e7d8ae06b32236ec1048a888cfad5abf2","analyzedAt":"2026-08-31T11:58:23.400Z","schemaVersion":2},"datasetVersion":"2026-08-31T14:17:45.589Z"}