Is my Ember.observer causing an issue in ember-bootstrap?

@sorvah wrote:

I have a component that takes an HH:MM and DD/MM/YYYY input and creates a date object as a value to be handled by my ember-bootstrap form.

The component produces the value one of three ways:

• An ‘Insert Time’ button click that triggers an action populating the fields, setting the value
• Manual input of the HH:MM, DD/MM/YYYY fields, triggering the action to set the value based on the input
• If a dropdown menu earlier in the form is selected, the time auto-populates to save the user some faffing.

Case 1 and 2 work fine. The problem is in case 3.

        {{#form.element class="form-label-bold" label="Time of Clerking" property="time_of_clerking" as |el|}}
            <DateTimeProForma @value={{el.value}} @genTime={{presentation.isSenior}} @existing={{model.time_of_clerking}} />
        {{/form.element}}

The relevant code from the component:

// if the isSenior property changes, the observer is supposed to execute the inserTime function from the actions
  triggerResponse: observer('genTime', function () {
    if (this.genTime === true) {
      let execute = this.actions
      execute.insertTime(this)
      this.set('genTime', false)
    }
  }),

  actions: {
    insertTime(context, existing) {
      let self = context || this

    //there is some code here to deal with the inputs and get them ready to be turned into an object

      self.set(`hours`, `${hours}:${minutes}`);
      self.set(`date`, `${day}/${month}/${generatedDate.getFullYear()}`);

// this sets the value property to the result of the createDateString Function
      self.set('value', createDateString(self.get('hours'), self.get('date')))

    }
  }

This is the action that triggers when a user clicks the ‘insertTime’ button and it works great. The general idea in Case 3 is that when the presentation.isSenior field changes, the observer executes the insertTime function as if a user has clicked the ‘Insert Time’ button.

It mostly works! The hours, date and even the value properties of the component all update as expected however in this one specific the case, the value on the component isn’t added as the value of the property by ember-bootstrap.

I don’t have this issue with Case 1 or Case 2 and I’m going slightly mad trying to work out why Case 3 has the problem when all things seem to be identical.

Given that all other things are equal, I assume the problem is something to do with the use of an observer and it producing unexpected behavior in ember-bootstrap. I’ve been going slightly insane trying to work this out and any ideas would be greatly appreciated.

Posts: 1

Participants: 1

Read full topic