diff --git a/polygerrit-ui/app/elements/shared/gr-account-list/gr-account-list.ts b/polygerrit-ui/app/elements/shared/gr-account-list/gr-account-list.ts index 113a881880..fc0ea79cb0 100644 --- a/polygerrit-ui/app/elements/shared/gr-account-list/gr-account-list.ts +++ b/polygerrit-ui/app/elements/shared/gr-account-list/gr-account-list.ts @@ -35,9 +35,9 @@ import { } from '../../../scripts/gr-reviewer-suggestions-provider/gr-reviewer-suggestions-provider'; import {ReportingService} from '../../../services/gr-reporting/gr-reporting'; import {GrAccountEntry} from '../gr-account-entry/gr-account-entry'; -import {PaperInputElement} from '@polymer/paper-input/paper-input'; import {GrAccountChip} from '../gr-account-chip/gr-account-chip'; import {PolymerDeepPropertyChange} from '@polymer/polymer/interfaces'; +import {PaperInputElementExt} from '../../../types/types'; const VALID_EMAIL_ALERT = 'Please input a valid email.'; @@ -344,14 +344,14 @@ export class GrAccountList extends GestureEventListeners( console.warn('received remove event for missing account', toRemove); } - _getNativeInput(paperInput: PaperInputElement) { + _getNativeInput(paperInput: PaperInputElementExt) { // In Polymer 2 inputElement isn't nativeInput anymore return (paperInput.$.nativeInput || paperInput.inputElement) as HTMLTextAreaElement; } _handleInputKeydown( - e: CustomEvent<{input: PaperInputElement; keyCode: number}> + e: CustomEvent<{input: PaperInputElementExt; keyCode: number}> ) { const input = this._getNativeInput(e.detail.input); if ( diff --git a/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.ts b/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.ts index ea573ab5ed..033b617d1e 100644 --- a/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.ts +++ b/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.ts @@ -29,17 +29,17 @@ import { CustomKeyboardEvent, } from '../../../mixins/keyboard-shortcut-mixin/keyboard-shortcut-mixin'; import {property, customElement, observe} from '@polymer/decorators'; -import {PaperInputElement} from '@polymer/paper-input/paper-input'; import {GrAutocompleteDropdown} from '../gr-autocomplete-dropdown/gr-autocomplete-dropdown'; import {GrCursorManager} from '../gr-cursor-manager/gr-cursor-manager'; import {EventWithPath} from '../../plugins/gr-event-helper/gr-event-helper'; +import {PaperInputElementExt} from '../../../types/types'; const TOKENIZE_REGEX = /(?:[^\s"]+|"[^"]*")+/g; const DEBOUNCE_WAIT_MS = 200; export interface GrAutocomplete { $: { - input: PaperInputElement & {$: {nativeInput?: Element}}; + input: PaperInputElementExt; suggestions: GrAutocompleteDropdown; cursor: GrCursorManager; }; diff --git a/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.ts b/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.ts index 0c8967636c..edadfbaf28 100644 --- a/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.ts +++ b/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.ts @@ -29,7 +29,7 @@ import {customElement, property} from '@polymer/decorators'; import {htmlTemplate} from './gr-editable-label_html'; import {IronDropdownElement} from '@polymer/iron-dropdown/iron-dropdown'; import {dom, EventApi} from '@polymer/polymer/lib/legacy/polymer.dom'; -import {PaperInputElement} from '@polymer/paper-input/paper-input'; +import {PaperInputElementExt} from '../../../types/types'; const AWAIT_MAX_ITERS = 10; const AWAIT_STEP = 5; @@ -42,7 +42,7 @@ declare global { export interface GrEditableLabel { $: { - input: PaperInputElement; + input: PaperInputElementExt; dropdown: IronDropdownElement; }; } @@ -188,12 +188,9 @@ export class GrEditableLabel extends KeyboardShortcutMixin( } get _nativeInput(): HTMLInputElement { - // In Polymer 2, the namespace of nativeInput changed from input to - // nativeInput. - // `this.$.input` has type PaperInputElement, so this is beyond our control - // and we cannot force `this.$.input.$` to have a proper type. - return (this.$.input.$['nativeInput'] || - this.$.input.$['input']) as HTMLInputElement; + // In Polymer 2 inputElement isn't nativeInput anymore + return (this.$.input.$.nativeInput || + this.$.input.inputElement) as HTMLInputElement; } _handleEnter(e: CustomKeyboardEvent) { diff --git a/polygerrit-ui/app/types/types.ts b/polygerrit-ui/app/types/types.ts index 44178c456f..8dd9371477 100644 --- a/polygerrit-ui/app/types/types.ts +++ b/polygerrit-ui/app/types/types.ts @@ -18,6 +18,7 @@ import {Side} from '../constants/constants'; import {IronA11yAnnouncer} from '@polymer/iron-a11y-announcer/iron-a11y-announcer'; import {GrDiffLine} from '../elements/diff/gr-diff/gr-diff-line'; import {FlattenedNodesObserver} from '@polymer/polymer/lib/utils/flattened-nodes-observer'; +import {PaperInputElement} from '@polymer/paper-input/paper-input'; export function notUndefined(x: T | undefined): x is T { return x !== undefined; @@ -59,6 +60,14 @@ export enum ErrorType { GENERIC = 'GENERIC', } +/** + * We would like to access the the typed `nativeInput` of PaperInputElement, so + * we are creating this wrapper. + */ +export type PaperInputElementExt = PaperInputElement & { + $: {nativeInput?: Element}; +}; + /** * If Polymer would have exported DomApiNative from its dom.js utility, then we * would probably not need this type. We just use it for casting the return