Bug mdb-completer component minimized. Cannot read property

Topic: Bug mdb-completer component minimized. Cannot read property title of null

jesustome free asked 6 years ago

I think there is a bug in the mdb-completer component.In file ng-mdb-pro/pro/autocomplete/directovies/input.directive.ts in the constructor function, the code is as shown below:

this.completer.selected.subscribe((item: CompleterItem) => {

if (!item) {

return;

}

if (this.clearSelected) {

this.searchStr = '';

}else {

this.searchStr = item.title;

}

this.ngModelChange.emit(this.searchStr);

});

But in the code of minimized file there is no conditional to check if item is null:

this.completer.selected.subscribe(function(t){i.searchStr=i.clearSelected?"":t.title,i.ngModelChange.emit(i.searchStr)})

The problem is if item is null, there are no return method so the next error is shown in console:

0.fd68682003debc23a05d.chunk.js:1 ERROR TypeError: Cannot read property 'title' of null at main.5c0ee3b166ece9c03c3d.bundle.js:1 at e.object.i [as _next] (main.5c0ee3b166ece9c03c3d.bundle.js:1) at e.OVmG.e.__tryOrUnsub (main.5c0ee3b166ece9c03c3d.bundle.js:1) at e.OVmG.e.next (main.5c0ee3b166ece9c03c3d.bundle.js:1) at e.OVmG.e._next (main.5c0ee3b166ece9c03c3d.bundle.js:1) at e.OVmG.e.next (main.5c0ee3b166ece9c03c3d.bundle.js:1) at e.next (main.5c0ee3b166ece9c03c3d.bundle.js:1) at e.WT6e.e.emit (main.5c0ee3b166ece9c03c3d.bundle.js:1) at t.search (main.5c0ee3b166ece9c03c3d.bundle.js:1) at main.5c0ee3b166ece9c03c3d.bundle.js:1

Thanks.

Add comment

jesustome free answered 6 years ago

0 0 Best answer

Hi Damian. In mdb-pro version 5.2.2 the file ng-mdb-pro/pro/autocomplete/directives/input.directive.ts, in line 42, has the following code:

if (!item) {

}

This causes the error to be reproduced also in localhost. In version 5.2.1 the code was:

if (!item) { return; }

And localhost did not fail, only in production

Damian Gemza staff commented 6 years ago

Dear Jesustome, Add this return; line and check if errors still exists. This return will be placed in next release.

osoverflow pro commented 6 years ago

Added the return, and that fixed the problem, the container worked again

jesustome free commented 6 years ago

Hello Damian. I'm sorry, but I have not been able to write before. The component is already working correctly. It only occurs to me that it could be improved if, when it is clicked the first time, it will display the entire list of options, just as it does when the written pattern is deleted. Thank you very much. Jesus.

Damian Gemza staff commented 6 years ago

Dear jesustome, We can't modify autocomplete to add behavior which you're expecting, because that's not the default behavior of Autocomplete. You can always modify code of autocomplete in your project to achieve this situation. Best Regards, Damian

jesustome free commented 6 years ago

Hello Damian, good news. I have been reviewing the code of the autocomplete component and I have seen that it has an @input openOnFocus. Initializing this input to true the component behaves as I wanted. That is, clicking on it displays the list of values before typing a character. It is not necessary to modify the component. Greetings. Jesus.

Add comment

jesustome free answered 6 years ago

1 0 Best answer

No, this problem not occurs on localhost version. Only occurs on production build version. It's same issue than https://mdbootstrap.com/support/autocomplete-error-cannot-read-property-title-of-nul/. Thanks. Jesús.

Damian Gemza staff commented 6 years ago

Is there a possibility to share me your project to mail or github? I'll take a look at code and try to repair your problem.

jesustome free commented 6 years ago

Sorry, the project is private and I am not allowed to share it. In a previous answer I uploaded the code of the component and indicated that the error occurred when pressing any one key on the component.

Damian Gemza staff commented 6 years ago

So could you provide me reproduction steps? What should be done in terminal to achieve your situation? Simple ng serve --prod? Or something else?

jesustome free commented 6 years ago

We are building with ng build --prod

Damian Gemza staff commented 6 years ago

And then what? ng serve --prod? or you'll pushing your project to ftp to check it on server?

jesustome free commented 6 years ago

Of course, the project we upload to a server.

Damian Gemza staff commented 6 years ago

Okay i'll check it, and let you know. Best Regards, Damian

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

This problem occurs only on localhost version? How about ng build --prod ? For production build it occurs, or not? Do I have to upload the project to a server to check your case? Any reproduction steps would be a good start of debugging. Best Regards, Damian

Add comment

jesustome free answered 6 years ago

0 0 Best answer

Thanks Damian.
I have updated to version 5.2.2, but the result is the same.
I have created a custom component that uses the mdb-completer component.
File.ts 
@Component({ 
selector: ‘gs-completer-search’, 
templateUrl: ‘./completer-search.component.html’, 
styleUrls: [‘./completer-search.component.scss’] 
}) 
export class CompleterSearchComponent implements OnInit {
@Input() label: string; 
@Input() initialValue: any; 
@Input() model: any; 
@Input() datasource: Array; 
@Input() minSearchLength: string; 
@Output() newModel: EventEmitter = new EventEmitter();
constructor() { }
ngOnInit() { 
if (!this.initialValue || !this.model || !this.datasource) { 
return; 
} 
}
change() { 
const found = this.datasource.find((element) => { 
return element === this.model; 
}); 
this.newModel.emit(found); 
}
click(event) { 
this.change(); 
}
onKeyup(event) { 
if (event.key === ‘Enter’) { 
this.change(); 
} 
} 
}
File.html
<mdb-completer [label]="label" initialValue="{{initialValue}}" 
[(ngModel)]="model" (input)="change()" (click)="click($event)" (keyup)="onKeyup($event)" 
[datasource]="datasource" [minSearchLength]="minSearchLength"></mdb-completer>
If I pulse I press a key is when it returns the error in console.
If I run it on localhost it works fine because it uses the non-minified version.
Thanks for the help

Please insert min. 20 characters.

Thanks Damian.

I have updated to version 5.2.2, but the result is the same.

I have created a custom component that uses the mdb-completer component.

File.ts
@Component({
selector: ‘gs-completer-search’,
templateUrl: ‘./completer-search.component.html’,
styleUrls: [‘./completer-search.component.scss’]
})
export class CompleterSearchComponent implements OnInit {

@Input() label: string;
@Input() initialValue: any;
@Input() model: any;
@Input() datasource: Array;
@Input() minSearchLength: string;
@Output() newModel: EventEmitter = new EventEmitter();

constructor() { }

ngOnInit() {
if (!this.initialValue || !this.model || !this.datasource) {
return;
}
}

change() {
const found = this.datasource.find((element) => {
return element === this.model;
});
this.newModel.emit(found);
}

click(event) {
this.change();
}

onKeyup(event) {
if (event.key === ‘Enter’) {
this.change();
}
}
}

File.html

<mdb-completer [label]="label" initialValue="{{initialValue}}"
[(ngModel)]="model" (input)="change()" (click)="click($event)" (keyup)="onKeyup($event)"
[datasource]="datasource" [minSearchLength]="minSearchLength"></mdb-completer>

If I pulse I press a key is when it returns the error in console.

If I run it on localhost it works fine because it uses the non-minified version.

Thanks for the help

Add comment

jesustome free answered 6 years ago

0 0 Best answer

MDB-PRO v.5.1.2

Damian Gemza staff commented 6 years ago

Firstly, please update your MDB Angular to the latest version. Also, could you provide me reproduction steps? I'm unable to reproduce your error.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

jesustome

17Support score
2Questions 4Answers 0Snippets