fix: datepicker not updating on outside value change

[Lalaluka]

Hi 🧑‍💻

This is a simple fix for: #440

Added a watcher to the Value for outside changes of value.
Since the hasValue State doesn't seem to have reactivity on its own.

I'm not absolutely keen if StencilJS has some way to make States reactive directly, if there is a possibility to handle it directly in the State that might be nicer. But I couldn't find such functionality.

Can be tested like this:

<scale-date-picker label="Helper Text" id="Test" value=""></scale-date-picker>
<script>
  setTimeout(()=>{
    document.getElementById('Test').setAttribute("value", "2020-12-31")
  }, 6000)
</script>

This also enables Stuff like this:

setTimeout(()=>{
  document.getElementById('Test').setAttribute("value", "2020-12-31")
}, 6000)
setTimeout(()=>{
  document.getElementById('Test').setAttribute("value", "")
}, 8000)
setTimeout(()=>{
  document.getElementById('Test').setAttribute("value", "2020-12-31")
}, 10000)

Let me know what you think :)

[acstll]

This is amazing @Lalaluka, thank you very much for this fix!

I left a picky comment, if you're so kind.

Thanks again!

[acstll]

By the way, @State() in Stencil is "reactive": it will trigger a render whenever it changes.

From the docs:

Any changes to a @State() property will cause the components render function to be called again.

Is that what you had doubts about?

[Lalaluka]

Hey @acstll ,
yea State is reactive in the way that the Component is rerendered if State is changing.

What I meant was going in the direction of reference. But the longer I think about the less reasonable it is.
You know how in js Objects are references?

let a = {a: 1}
let b = a
a = {a: 2}
console.log(b) // {a: 2}

Something like that, but for the state value set.
What I didn't think about was that variables are not and state is a variable :)
Watch is exactly the tool for this issue tho.

Don't mind the comment, It is not that smart as I initially thought 😅

[acstll]

Thank you once more!