Using Autocomplete-lhc with Angular2+
kcox40 opened this issue · 3 comments
Hello, I am running into some issues setting up my angular 6 project with this. Are there any current examples of this library being integrated with Angular 6 (not AngularJs?)
We have not tried Angular > 1.x. I would guess that the AngularJS directive does not work with later versions of Angular. If that is the issue, you could either use it without a directive or make an Angular 6 version of the directive (the code for which is in source/autocomplete-lhc.js). If the problem is that including source/autocomplete-lhc.js in an Angular6 environment at all (even if not used) causes something to blow up, then you might need to exclude that one file from the build. (Assuming you are using webpack and the npm package, that would mean removing the last line of source/index.js ("require('./autocomplete-lhc')(Def);"). Assuming you get something working, we would be happy to have to a pull request, as long as it did not break the AngularJS support.
Update:
I have gotten the the library in I think. Running
console.log(Def.Autocompleter);
results in this in the console window:
{isIE: false, currentAutoCompField_: -1, USE_STATISTICS: 2, NO_COMPLETION_SUGGESTIONS: 0, SUGGEST_SHORTEST: 1, …} Base: ƒ () Event: {observeListExpansions: ƒ, observeListSelections: ƒ, observeFocusEvents: ƒ, observeCancelList: ƒ, observeSuggestions: ƒ, …} LIST_ITEM_FIELD_SEP: " - " NO_COMPLETION_SUGGESTIONS: 0 Prefetch: ƒ klass() SUGGEST_SHORTEST: 1 Search: ƒ klass() USE_STATISTICS: 2 cancelAlarm: ƒ (field) createDOMCache: ƒ (directProps, jitProps) currentAutoCompField_: -1 findRelatedFields: ƒ (field, otherFieldLookupKey) getFieldLabel: ƒ (fieldID) getFieldLookupKey: ƒ (field) getFieldVal: ƒ (field) isIE: false listItemElementContainer: ƒ () listItemElements: ƒ () lookupFields: ƒ (lookupKey) screenReaderLog: ƒ (msg) screenReaderLog_: Def.ScreenReaderLog {logElement_: div#reader_log.screen_reader_only} setFieldVal: ƒ (field, val, runChangeEventObservers) setOffAlarm: ƒ (field) setOptions: ƒ (options) sharedDOMCache: {data: {…}, get: ƒ, set: ƒ, invalidate: ƒ, refresh: {…}} stopEvent: ƒ (event) __proto__: Object
My current issue is that trying to run:
new Def.Autocompleter.Prefetch('drug_strengths', []);
Results in this console error:
ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'id' of null TypeError: Cannot read property 'id' of null at klass.ensureNeededAttrs (autoCompBase.js:777) at klass.defAutocompleterBaseInit (autoCompBase.js:671) at klass.initialize (autoCompPrefetch.js:164) at new klass (prototype_api.js:130) at new ChecklistCreationPageComponent (checklist-creation-page.component.ts:30) at createClass (core.js:18588) at createDirectiveInstance (core.js:18467) at createViewNodes (core.js:19693) at createRootView (core.js:19607) at callWithDebugContext (core.js:20639) at resolvePromise (zone.js:814) at resolvePromise (zone.js:771) at zone.js:873 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:14051) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188) at drainMicroTaskQueue (zone.js:595) at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:500) at invokeTask (zone.js:1540)
The part causing the issue is
/** * Ensures there is an ID on the list's element, creating one if necessary. */ ensureNeededAttrs: function () { // The autocompleter uses the ID attribute of the element. If pElem // does not have an ID, give it one. var pElem = this.element; if (**pElem.id** === '') { // In this case just make up an ID. if (!Def.Autocompleter.lastGeneratedID_) Def.Autocompleter.lastGeneratedID_ = 0; pElem.id = 'ac' + ++Def.Autocompleter.lastGeneratedID_; } },
Any ideas for why this issue is occurring ?
That sounds like you do not have an element on the page with ID of "drug_strengths" (at least not at the time the Prefetch constructor is running).
Compare with https://embed.plnkr.co/ribBnsyc3senibgXrRlg?show=index.html,preview&sidebar=false (though perhaps you already have).