Skip to content

Commit

Permalink
fix(typeahead): Fix crash on Firefox and contenteditable input (#2057)
Browse files Browse the repository at this point in the history
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
  • Loading branch information
adrienverge authored and valorkin committed Jul 18, 2017
1 parent 2bf9ad8 commit 8656326
Showing 1 changed file with 7 additions and 3 deletions.
10 changes: 7 additions & 3 deletions src/typeahead/typeahead.directive.ts
Original file line number Diff line number Diff line change
Expand Up @@ -118,11 +118,15 @@ export class TypeaheadDirective implements OnInit, OnDestroy {
}

// For `<input>`s, use the `value` property. For others that don't have a
// `value` (such as `<span contenteditable="true">`, use `innerText`.
// `value` (such as `<span contenteditable="true">`), 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 {
Expand Down

0 comments on commit 8656326

Please sign in to comment.