Ngx-bootstrap: Cannot read property 'length' of undefined

[rlassche]

Typeahead with ng-select and ngx-typeahead differ, and I want to use both of them in angular formly and bootstrap..

Error message below occured when I combined ng-select and ngx-typeahead.

core.js:6228 ERROR TypeError: Cannot read property 'length' of undefined
    at TypeaheadDirective.onBlur (ngx-bootstrap-typeahead.js:2010)
    at TypeaheadDirective_blur_HostBindingHandler (ngx-bootstrap-typeahead.js:2394)
    at executeListenerWithErrorHandling (core.js:21806)
    at wrapListenerIn_markDirtyAndPreventDefault (core.js:21848)
    at SafeSubscriber.schedulerFn [as _next] (core.js:37171)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:183)
    at SafeSubscriber.next (Subscriber.js:122)
    at Subscriber._next (Subscriber.js:72)
    at Subscriber.next (Subscriber.js:49)
    at EventEmitter.next (Subject.js:39)

SOLUTION:

In my case, I solved the error by editing file node_modules/ngx-bootstrap/__ivy_ngcc__/typeahead/fesm2015/ngx-bootstrap-typeahead.js.
The onBlur method is modfied:

onBlur() {
        this.isFocused = false;
        if (this._container && !this._container.isFocused) {
            this.typeaheadOnBlur.emit(this._container.active);
        }
        if (!this.container && this._matches && this._matches.length === 0) {
            this.typeaheadOnBlur.emit(new TypeaheadMatch(this.element.nativeElement.value, this.element.nativeElement.value, false));
        }
    }

NOTE: I added && this._matches in the second if.

[Trottero]

Currently having the same issue, wondering whether there's a way to solve this problem without resorting to editing node_modules

[rlassche]

Hi,
I did not found an other solution.I hope that my suggestion will be updated in the source.
Greetings,Rob Lassche

Verzonden via Yahoo Mail op Android

Op di, jul. 7, 2020 om 12:14 schreef Niels [e-mail]:

Currently having the same issue, wondering whether there's a way to solve this problem without resorting to editing node_modules

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub, or unsubscribe.

[tirro-s]

I add this two options and problem gones!

[typeaheadOptionsLimit]="7"
[typeaheadMinLength]="0"

[rlassche]

Hello Tirro-s,

that's a much better solution!

I will implement it this week.

Thanks,

Greetings,

Rob Lassche

On 7/8/20 7:19 PM, tirro-s wrote:
>

I add this two options and problem gones!

[typeaheadOptionsLimit]="7"
[typeaheadMinLength]="0"

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/valor-software/ngx-bootstrap/issues/5826#issuecomment-655649691,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ABQBT2E44NJKJAZH5LZ75NDR2STAVANCNFSM4OCG2F2A.

[uttahb]

Hi @tirro-s ,

I am using ngx-bootstrap 5.6.1 and it seems like the fix you mentioned not working. I couldn't find an alternate solution as well.

[szh]

Seems to be solved in https://github.com/valor-software/ngx-bootstrap/issues/5736, thought it's not released to npm

[daniloff200]

fix was released in 6.0.0

[eugene-b360]

6.0.0 - is for Angular 9, 10.
I've got 8. Is there any possible fix or work around for it in 5.6.2 ?

[bryantlikes]

[typeaheadMinLength]="0"

Just adding this seems to get rid of it. I'm assuming this is because it causes the control to build the _matches array.

[DerZyklop]

@bryantlikes’s workaround works.

And since updating my ngx-bootstrap to 6 ist blocked in my project for other reasons i can also confirm that his workaround works on
[email protected] with [email protected].

[harrymaynard-maximus]

Hi, will this be fixed in a future 5.x release of the library?