rubyboy
commented
7 years ago @craigbroadman thanks so much for offering to assist with a fix for this!
The place you'd want to add the workaround is MaterializeDirective. You can fork this project and go into the "sample" folder, where you can run the sample and play around while changing materialize-directive.ts
What I would do is add a host listener inside the directive. And only perform actions (the workaround) based on a check to confirm that this is an autocomplete component. Here is some sample code you can add to the directive and see being called as you change the contents of the autocomplete in the form example in the sample project:
@Directive({
selector: '[materialize]'
})
export class MaterializeDirective implements AfterViewInit,DoCheck,OnChanges,OnDestroy {
// example code
@HostListener('click', ['$event.target']) onClick(target) {
this.elementClick(target);
}
@HostListener('keyup', ['$event.target']) onKeyup(target) {
this.elementKeyup(target);
}
elementClick(target) {
if (this.isAutocomplete()) { // here is where you'd put the workaround code
console.log("click",target);
}
}
elementKeyup(target) {
if (this.isAutocomplete()) { // here is where you'd put the workaround code
console.log("keyup",target);
}
}
craigbroadman
There is a bug with in Autocomplete in the vanilla materialize css.
If the list is bound to a long list of items, the list is not cleared from the DOM when the user selects an item.
Whilst this is in the vanilla version I think this could be resolve in angular2 materialize but I am struggling to determine where to implement the "fix".
Details can be found here... https://stackoverflow.com/questions/40214868/how-to-fix-this-blank-list-appearing-in-materializecss-autocompleteinternet-ex
They recommend a fix of and have created a codepen demonstrating this working, but because the autocomplete is created in Angular, I cannot find the right place to implement this?
$('.autocomplete-content').on('click', 'li', function () { $('.autocomplete-content').hide(); }); $('input.autocomplete').on('keyup',function(){ $('.autocomplete-content').show();})
Can you point me in the right direction? I am more than happy to create a pull request to get this in.
Thanks