Fix TypeScript error with PaperInputElement props
I am getting a "ts-conformance#property-renaming-safe" error for
`paperInput.$.nativeInput`.
This change unifies how to deal with native input of PaperInputElement
in all files.
Change-Id: I0842d2dccaa48af6b0c39c5e780a5ab163174889
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 113a881..fc0ea79 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 @@
} 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 @@
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 ea573ab..033b617 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 @@
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 0c896763..edadfba 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 {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 @@
export interface GrEditableLabel {
$: {
- input: PaperInputElement;
+ input: PaperInputElementExt;
dropdown: IronDropdownElement;
};
}
@@ -188,12 +188,9 @@
}
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 44178c4..8dd9371 100644
--- a/polygerrit-ui/app/types/types.ts
+++ b/polygerrit-ui/app/types/types.ts
@@ -18,6 +18,7 @@
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<T>(x: T | undefined): x is T {
return x !== undefined;
@@ -60,6 +61,14 @@
}
/**
+ * 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
* value of dom(element).
