Parent has undefined state-bound properties when notified by a child component

[under24]

Current: When the child tries to notify the parent and if the parent has an observer on the notified property then in the observer function all state-bound properties of the parent component are undefined.

Expected: the observers should be called AFTER all the state-bound properties are initialized with the corresponding values from the state

Parent component:

<template>
    <child-component bar="{{foo}}"></child-component>
</template>

<script>
      static get properties() {
        return {
          foo: {
            observer: 'observeFoo'
          },
          baz: {
            state: 'state.baz'
          }
        }
      }

      observeFoo(newValue, oldValue) {
        this.baz; // undefined. the value should be present. do not run observers until the component is initialized with the values from the state
      }
</script>

Child component:

     static get properties() {
        return {
          fuu: {
            statePath: 'state.fuu',
            observer: 'observeFuu'
          },
          // notify parent component
          bar: {
            notify: true
          }
        }
      }

      observeFuu(newValue, oldValue) {
        this.bar = someMethod(newValue);
      }

[under24]

@tur-nr Hello. Can you please take a look at this issue? Thanks

[tur-nr]

Hey, thanks for raising this issue. However your code samples above make no sense.

• child-component has no property foo.
• parent-component has no property bar.

I'm not sure what you are trying to achieve. Please could you submit a working example to help me out identify if/where the bug is, thanks.

[under24]

@tur-nr Sorry, i mixed up one line: `

`

Let me explain the flow and the problem.

It begins in the child component: 1.) 'fuu' is assigned a value from the 'state.fuu' 2.) the observer 'observeFuu' is fired which assigns some value to 'bar' 3.) 'bar' notifies the parent component 4.) the parent component has a 'foo' property bound to the child 'bar' property so it gets a value assigned 5.) observer 'observeFoo' is fired because 'foo' has been assigned a value 6.) inside of the 'observeFoo' function 'this.bar' is undefined. <--- here's the problem

the observer 'observeFoo' should be called after every property of the parent component has been assigned a value from the state.

[tur-nr]

Thanks again for raising, I will take a look sometime this evening (AEST).