search

chakra-ui / chakra-ui-vue

⚡️ Build scalable and accessible Vue.js applications with ease.
https://vue.chakra-ui.com
MIT License
1.87k stars 136 forks source link

Collapse's hidden content is initially visible. #269

Open k16e-me opened 4 years ago

k16e-me commented 4 years ago

Describe the bug First of all, on the site https://vue.chakra-ui.com/collapse, Collapse doesn't seem to be working. Then on my test, where I'm building with it, when the page loads, Collapse content seems to be initially visible until it's hidden again.

To Reproduce Steps to reproduce the behavior:

  1. Go to 'https://lkn-v1-git-master.k16e.vercel.app/'
  2. Observe the page loading...

Expected behavior Collapse content should be hidden away at all times until it is toggled into view. Except the editor explicitly set it to visible initially.

Additional context Refer to this IA.net site, observe the loading, then click on the hamburger.

codebender828 commented 4 years ago

Thanks for catching this. @k16e-me . I think this was caused by a typo in the docs. Will look into this.

I'm not sure I understood what you meant by the collapse initially showing its content 🤔. I took a look at your example in the test at this link:

https://lkn-v1-git-master.k16e.vercel.app/

And the collapse in this link hides it's content initially on page load until the button is toggled.

Like the ai.net site you linked.

I might have misunderstood it, but anything to help me understand but will be useful. Are you using the Chakra Collapse component in it? I'm going to do some investigating as well into this.

k16e-me commented 4 years ago

Hi, yes @codebender828, you did understand me. And thanks for taking a look. Hopefully, when that is fixed and I update/refresh that error should clear.

I'm pasting a short video link here to demonstrate what I'm experiencing. Thanks. https://www.loom.com/share/16e4533a0f8b42fea23bde1d48a1e015

k16e-me commented 4 years ago

Hi, @codebender828, should I take it this issue is to be considered and will be fixed and can go ahead and close it. Or should I leave it open until fixed? Thanks for the good work.

codebender828 commented 4 years ago

Hey @k16e-me ! No worries. I'll close the issue once it's completely fixed 👍 I've updated the docs with the CCollapse fix. The actual initially visible problem requires an internal API change. Will let you know when it's ready. thanks for your patience with this.

k16e-me commented 4 years ago

Sure. Thanks.

bmulholland commented 4 years ago

@codebender828 Depending on the complexity of this change, I might be willing to take it on (it's quite visible in my product demo so I'm motivated to get it fixed!). Are you open to a PR for this bug? Could you share a bit more about the internal API change you had in mind? I'm guessing it has something to do with the CAnimateHeight approach?

k16e-me commented 4 years ago

Hi @codebender828 and all, just reloading the main site https://vue.chakra-ui.com/collapse and noticing this issue isn't fixed still...is it in the queue or something?