DatePicker setValue called before attached

[schmarre]

Hello, I'm having an issue with the date picker item. Following error is showing up: Cannot read property 'setDate' of undefined at MdDatePicker.valueChanged (datepicker.ts:91) at BehaviorPropertyObserver.selfSubscriber (index.js:97) at BehaviorPropertyObserver.call (aurelia-templating.js:3887) at BehaviorPropertyObserver.aureliaTemplating.BehaviorPropertyObserver.setValue (index.js:71) at Binding.updateTarget (aurelia-binding.js:5033) at Binding.binding.updateTarget (aurelia-validation.js:699) at Binding.call (aurelia-binding.js:5048) at SetterObserver.callSubscribers (aurelia-binding.js:411) at SetterObserver.call (aurelia-binding.js:3852) at TaskQueue._flushQueue (aurelia-task-queue.js:99) at TaskQueue.flushMicroTaskQueue (aurelia-task-queue.js:150) at MutationObserver. (aurelia-task-queue.js:75)

The instance object in datepicker.ts has not yet been defined by the attached method.

This is my definition in the view:

<md-datepicker value.two-way="kopf.akadat  & validate:rules" 
                              label="${ 'kis.offer.package.valid-until' | t}" 
                              view-model.ref="mdPackageEndDate"
                               i18n.bind="ui.advancedOptions2.i18n"
                               auto-close="true">
  </md-datepicker>

Any idea on how to remove this error?

Thanks in advance

[MaximBalaganskiy]

Can you create a gist with the error?

On Fri, Mar 29, 2019, 2:18 AM Daniel Mares notifications@github.com wrote:

Hello, I'm having an issue with the date picker item. Following error is showing up: Cannot read property 'setDate' of undefined at MdDatePicker.valueChanged (datepicker.ts:91) at BehaviorPropertyObserver.selfSubscriber (index.js:97) at BehaviorPropertyObserver.call (aurelia-templating.js:3887) at BehaviorPropertyObserver.aureliaTemplating.BehaviorPropertyObserver.setValue (index.js:71) at Binding.updateTarget (aurelia-binding.js:5033) at Binding.binding.updateTarget (aurelia-validation.js:699) at Binding.call (aurelia-binding.js:5048) at SetterObserver.callSubscribers (aurelia-binding.js:411) at SetterObserver.call (aurelia-binding.js:3852) at TaskQueue._flushQueue (aurelia-task-queue.js:99) at TaskQueue.flushMicroTaskQueue (aurelia-task-queue.js:150) at MutationObserver. (aurelia-task-queue.js:75)

The instance object in datepicker.ts has not yet been defined by the attached method.

This is my definition in the view:

Any idea on how to remove this error?

Thanks in advance

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/aurelia-ui-toolkits/aurelia-materialize-bridge/issues/545, or mute the thread https://github.com/notifications/unsubscribe-auth/ADimvCcDPFgBUDgY566w7DNG-Z8bI5Myks5vbN1MgaJpZM4cQbTU .

[schmarre]

I will try to make it reproduce on a gist project. But I'm not sure if I will be able to reproduce the error, see the explication in the View-Definition.

To clarify the situation, I've been testing my project this morning with this error. My project is an Aurelia cli project. The error only happens when the value in the date picker object is bound to an object which is not yet available at the attached moment. If the value is bound to an local variable in the model object, there is no error.

View-Definition --> with error => value.bind="media.mddatfak" --> media object is called through rest api. The REST call takes a while; the backend is on a different continent than from where I'm testing the client application!

 <md-datepicker container.bind="dpWrapper" 
                              value.bind="media.mddatfak | dateFormat  & validate:rules" 
                              label="${ 'baseData.media.invoiced-until-apparence' | t}" 
                              view-model.ref="mddatfakDatePicker"
                              i18n.bind="ui.advancedOptions2.i18n"
                              auto-close="true">
                          </md-datepicker>

if value bound to a local variable (locObj) in model, there is no error!

 <md-datepicker container.bind="dpWrapper" 
                              value.bind="locObj | dateFormat  & validate:rules" 
                              label="${ 'baseData.media.invoiced-until-apparence' | t}" 
                              view-model.ref="mddatfakDatePicker"
                              i18n.bind="ui.advancedOptions2.i18n"
                              auto-close="true">
                          </md-datepicker>

[MaximBalaganskiy]

Can you please try and replace the line 91 with if(this.instance) { this.instance.setDate(this.value);}? If it works for you I can release it in a new patch.

[schmarre]

Ok, I've tested with this change and it seems to work. But I also had to change the line 94 this.instance.setInputValue(); to if(this.instance) { this.instance.setInputValue();}

Thanks for the help!