From bd9a13defdc0f1b0d2c0dcdde2708d068ea60069 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adrien=20Verg=C3=A9?= Date: Tue, 13 Jun 2017 11:31:32 +0200 Subject: [PATCH] fix(typeahead): Fix crash on Firefox and `contenteditable` input When using the typeahead directive on a `contenteditable` input, crashes can happen on Firefox: TypeError n.target.innerText is undefined According to many sources [1] [2] [3], `innerText` should only be used on old browsers where `textContent` in not defined (e.g. Internet Explorer). On newer browsers that abide by standards, `textContent` is the right property to use to avoid problems. [1]: https://stackoverflow.com/a/22990890 [2]: https://teamtreehouse.com/community/firefox-innertext-undefined-teachers-note [3]: https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent --- src/typeahead/typeahead.directive.ts | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/typeahead/typeahead.directive.ts b/src/typeahead/typeahead.directive.ts index 4e0c61144e..dec4580246 100644 --- a/src/typeahead/typeahead.directive.ts +++ b/src/typeahead/typeahead.directive.ts @@ -118,11 +118,15 @@ export class TypeaheadDirective implements OnInit, OnDestroy { } // For ``s, use the `value` property. For others that don't have a - // `value` (such as ``, use `innerText`. + // `value` (such as ``), use either + // `textContent` or `innerText` (depending on which one is supported, i.e. + // Firefox or IE). const value = e.target.value !== undefined ? e.target.value - : e.target.innerText; - if (value.trim().length >= this.typeaheadMinLength) { + : e.target.textContent !== undefined + ? e.target.textContent + : e.target.innerText; + if (value && value.trim().length >= this.typeaheadMinLength) { this.typeaheadLoading.emit(true); this.keyUpEventEmitter.emit(e.target.value); } else {