Controls not working with v-bind

[victorlmneves]

Describe the bug

When passing data/props to component using v-bind nothing updates when changing the props on the control panel.

Reproduction

Here you can find a reproduction of the issue
https://stackblitz.com/edit/vitejs-vite-fkqytv?file=histoire%2FBaseButton.story.vue&terminal=dev

System Info

System:
    OS: macOS 11.6.2
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 18.66 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.1/bin/npm
  Browsers:
    Brave Browser: 103.1.40.107
    Chrome: 103.0.5060.53
    Firefox: 101.0.1
    Safari: 15.2
  npmPackages:
    @vitejs/plugin-vue: ^2.2.4 => 2.3.3 
    histoire: ^0.7.8 => 0.7.8 
    vite: ^2.9.8 => 2.9.9

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.

[victorlmneves]

After playing a little more with the tool I saw that when using the v-bind it doesn't work for props of type boolean when setting it initially with the value true. If the value is set initially as false it works as expected.
Based on this, not sure if the problem isn't caused by the auto-detected props listed aren't populated automatically with the data we pass to the component. We can only see the initial props data if we add the controls template and we set each of the props over there.

[Akryum]

I'm not sure to understand what the issue is about. Could you provide more details about what is expected and what is actually happening? Thanks !

[victorlmneves]

Probably the issue title it's not the best one. I have mentioned the v-bind because I'm working with v-bind but now after playing more with Histoire I think it's related to the auto-props functionality.
When updating the data using auto-props fields it works for input text fields, but if the prop is a boolean and on the initial data I set it to true, then I'm not able to change the "value" of that prop. I believe it's related to those fields not getting the initial value and since when a prop is a boolean and is set initially to true when clicking on the checkbox the value sent will be the opposite.
I have recorded a video so you can see the behavior that I'm talking about.
https://drive.google.com/file/d/1jouHXNYHLWe8DoyVwfgQ6qe1tTr_R721/view?usp=sharing

[Akryum]

I am able to change props value and it works in your reproduction:

[victorlmneves]

@Akryum the issue it's only with props that are boolean and when they have the initial value set to true

[victorlmneves]

On that stackblitz example, just go to the "Secondary" variant and click on the "isDisabled" checkbox. You will see that nothing happens. But if you go to the "Primary" variant you will see that works

[victorlmneves]

@Akryum just one note.
I already tested the new version and it works fine, but... if we have the template controls and the auto-props it gets messed. If for some reason the user changes the state on the auto-props, then on the template controls it loses the reactivity and the user no longer is able to update that value through the template control.
You may ask why have both as now we are able to hide the auto-props but until the JSON code editor element is available, on the components that receive an object I still need to show both as n the control since we only have the HstTextarea, on this input the data is rendered as [object, Object]

Thanks for the quick fixes and for this great tool :)