Topic: Bug mdb-completer component minimized. Cannot read property title of null
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.
Damian Gemza staff commented 7 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 commented 7 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 7 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 commented 7 years ago
We are building with ng build --prodDamian Gemza staff commented 7 years ago
And then what? ng serve --prod? or you'll pushing your project to ftp to check it on server?jesustome commented 7 years ago
Of course, the project we upload to a server.Damian Gemza staff commented 7 years ago
Okay i'll check it, and let you know. Best Regards, Damian
Damian Gemza staff commented 7 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.
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
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 7 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 7 years ago
Added the return, and that fixed the problem, the container worked againjesustome commented 7 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 7 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, Damianjesustome commented 7 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.FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No