Property 'setRangeText' does not exist on type 'HTMLInputElement'

[cannahum]

Bug: Title is clear I hope

TypeScript Version: 2.4.2

Code On service.d.ts

declare type EditableElement = (HTMLInputElement | HTMLIFrameElement | HTMLTextAreaElement);

On service.ts

function replaceWord(node: EditableElement, newWord: string) {
  // some checks about the user's click and selected
  // range on the input element... and then
  node.setRangeText(newWord);
}

Visual Studio Code / Typescript 2.4.2 / immediately marks it as an error,

[ts] Property 'setRangeText' does not exist on type 'HTMLInputElement | HTMLTextAreaElement'. Property 'setRangeText' does not exist on type 'HTMLInputElement'.

Then I run it on my compile script

Webpack - webpack@3.0.0

Loader - awesome-typescript-loader@3.2.2

Typescript - typescript@2.4.2

Expected behavior: No errors are expected. As per https://developer.mozilla.org/en/docs/Web/API/HTMLInputElement this API seems available.

Actual behavior:

ERROR in [at-loader] ./path/to/service.ts:130:14 TS2339: Property 'setRangeText' does not exist on type 'HTMLInputElement | HTMLTextAreaElement'. Property 'setRangeText' does not exist on type 'HTMLInputElement'.

[mhegazy]

PRs welcomed. You can find more information about contributing lib.d.ts fixes at https://github.com/Microsoft/TypeScript/blob/master/CONTRIBUTING.md#contributing-libdts-fixes.

[MikeFried]

It looks like there are 2 versions of setRangeText. Searching for this on Google led me to the Webkit source for an example of the signatures: https://github.com/adobe/webkit/blob/master/Source/WebCore/html/HTMLInputElement.cpp

Something like this would work: type SelectionMode = 'select'|'start'|'end'|'preserve'; setRangeText(replacement: string, selectionMode: SelectionMode = 'select'): void; setRangeText(replacement: string, start: number, end: number, selectionMode: SelectionMode = 'select'): void;

A pull request fixing this would be to add something generating the above to https://github.com/Microsoft/TypeScript/blob/master/src/lib/dom.generated.d.ts#L5507 ... Except that's supposed to be generated from ... https://github.com/Microsoft/TSJS-lib-generator/blob/master/inputfiles/browser.webidl.xml#L5162 and https://github.com/Microsoft/TSJS-lib-generator/blob/master/inputfiles/comments.json#L1950

I don't actually have an environment setup to contribute, or I'd do it and make the PR myself...

It also appears that Microsoft's web browser deviates from the HTML5 standard and does not implement setRangeText as documented by: https://msdn.microsoft.com/en-us/library/dn705365 -- That may be why these definitions were omitted from the TS library in the first place.

[saschanaz]

It's now added by https://github.com/Microsoft/TSJS-lib-generator/pull/495.

[jakebailey]

Per above, this looks to be fixed, although the original example doesn't compile, as HTMLIFrameElement does not have setRangeText, and MDN agrees.