search

davecoffin / nativescript-filterable-listpicker

Apache License 2.0
44 stars 22 forks source link

Filtering - not working IOS and Android #31

Closed anuragd7 closed 6 years ago

anuragd7 commented 6 years ago

Make sure to check the demo app(s) for sample usage

Make sure to check the existing issues in this repository

If the demo apps cannot help and there is no issue for your problem, tell us about it

Please, ensure your title is less than 63 characters long and starts with a capital letter.

Which platform(s) does your issue occur on?

Please, provide the following version numbers that your issue occurs with:

Please, tell us how to recreate the issue in as much detail as possible.

Have setup the plugin as described in the ReadMe file. On triggering showPicker() the list of items shows correctly. However when I type in any string in the filterable listpicker the list of items becomes empty and nothing shows. Am not getting any error logs on the IOS (emulator) but on the android device I get the following error message 

JS: search box focused. 
JS: ERROR TypeError: _co.onSearchFocus is not a function
JS: ERROR CONTEXT {
JS:   "view": {
JS:     "def": {
JS:       "nodeFlags": 453099521,
JS:       "rootNodeFlags": 402653185,
JS:       "nodeMatchedQueries": 6,
JS:       "flags": 0,
JS:       "nodes": [
JS:         {
JS:           "nodeIndex": 0,
JS:           "parent": null,
JS:           "renderParent": null,
JS:           "bindingIndex": 0,
JS:           "outputIndex": 0,
JS:           "checkIndex": -1,
JS:           "flags": 402653184,
JS:           "childFlags": 0,
JS:           "directChildFlags": 0,
JS:           "childMatchedQueries": 0,
JS:           "ngContentIndex": -1,
JS:           "matchedQueries": {},
JS:           "matchedQueryIds": 0,
JS:           "references": {},
JS:           "childCount": 0,
JS:           "bindings": [],
JS:           "bindingFlags": 0,
JS:           "outputs": [],
JS:           "element": null,
JS:           "provider": null,
JS:           "text": null,
JS:           "query": {
JS:             "id": 1,
JS:             "filterId": 2,
JS:             "bindings": [
JS:               {
JS:                 "propName": "subjects",
JS:                 "bindingType": 0
JS:               }
JS:             ]
JS:           },
JS:           "...

Is there any code involved?

import { registerElement } from "nativescript-angular/element-registry"; import { GradeSubjectService } from "../../services/grade-subject.service"; import { SearchModalComponent } from "../searchbar/searchModal.component";

registerElement( "FilterableListpicker", () => require("nativescript-filterable-listpicker").FilterableListpicker );

@Component({ moduleId: module.id, selector: "lessons", templateUrl: "./lessons.component.html" }) export class LessonsComponent implements OnInit, AfterViewInit { @Input() group: FormGroup; @Input() subjectSelected: any; @Input() gradeSelected: any;

@Input() searchGrades: any; @Input() searchSubjects: any;

@ViewChild("myfilter") myfilter: ElementRef;

@ViewChild("myGrid") myGrid: ElementRef; allLessons: any; showLessons: any[]; constructor(private gradeSubjectService: GradeSubjectService) { this.allLessons = this.gradeSubjectService.lessonsObject; this.showLessons = []; }

ngOnInit() { console.log( "subject selected in lessons is" + JSON.stringify(this.subjectSelected) ); }

ngAfterViewInit() { if (this.subjectSelected && this.gradeSelected) { for (let key in this.searchSubjects) { // skip loop if the property is from prototype if (!this.searchSubjects.hasOwnProperty(key)) continue; const subject = key; for (let key2 in this.allLessons[subject]) { const grade = key2; this.prepareLessons(this.allLessons[subject][grade]); } } // this.showLessons = this.allLessons[this.searchSubjects]; } }

cancelFilterableList() { console.log("canceled"); }

itemTapped(args) { console.log("selected lesson is " + args.selectedItem); }

showPicker() { this.myfilter.nativeElement.show(this.lessonGrid.nativeElement); }

prepareLessons(lessonObject) { const self = this; // const tempLessons = []; for (const lesson of lessonObject) { const lessonName = Object.keys(lesson); const aLessonObject = { title: lessonName[0] }; self.showLessons.push(aLessonObject); }

console.log("number of items is " + this.showLessons.length);

} }



 - (EVEN BETTER) provide a .zip with application or refer to a repository with application where the problem is reproducible.
davecoffin commented 6 years ago

The first thing I notice is showList doesnt exist in your TS file.

anuragd7 commented 6 years ago

@davecoffin - my apologies - I have edited my request with the correct code - 

<FilterableListpicker #myfilter blur="dark" hintText="Type to filter..." [source]="showLessons" (canceled)="cancelFilterableList($event)" (itemTapped)="itemTapped($event)"></FilterableListpicker>
</GridLayout>

This source property is bound to showLessons in my original code and I made a mistake while pasting the code in the report. Any idea what might be going wrong? Thanks

davecoffin commented 6 years ago

The problem is the way you are setting up your showLessons array. Do this instead:

prepareLessons(lessonObject) {
    const self = this;
    let showLessonsArr = [];
    for (const lesson of lessonObject) {
      const lessonName = Object.keys(lesson);
      const aLessonObject = { title: lessonName[0] };
      showLessonsArr.push(aLessonObject);
    }
    this.showLessons = showLessonsArr;
    console.log("number of items is " + this.showLessons.length);
  }

try that.

anuragd7 commented 6 years ago

Thanks @davecoffin for pointing out the error. Can confirm this works on both IOS and Android.