chakra-ui-vue
chakra-ui-vue copied to clipboard
BUG: Collapse not emitting `finish` event after completing animation.
Describe the bug I'm not sure if I'm doing something wrong or if there's a bug here, but with this code:
<c-button mb="4" variant-color="blue" @click="show = !show">
Show {{ show ? "Less" : "More" }} (expanding should open the toast)
</c-button>
<c-collapse :starting-height="20" :is-open="show" @finish="showToast">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
labore wes anderson cred nesciunt sapiente ea proident.
</c-collapse>
showToast does not seem to be firing when the collapse is expanded/contracted.
To Reproduce Steps to reproduce the behavior:
- Visit https://codesandbox.io/s/zealous-wilbur-qvwny?file=/src/App.vue
- Check code
- Expand/contract the collapse
- Note that the
showToastmethod does not seem to fire
Expected behavior I am trying to call a method once the Collapse has expanded
Screenshots
Please see https://codesandbox.io/s/zealous-wilbur-qvwny?file=/src/App.vue
Thanks for capturing this issue @philwolstenholme I also appreciate the reproduction.
I just realized that we didn't write a test for the emission of the @finish event. So it must have broken when we refactored to using functional components in v0.
for now I'm focusing efforts on cranking out v1. I'll be able to find time to go through this issue at the end of the week or so. But if you are able to debug it and come up with a fix, I'll be happy to review it and release a patch version for you 🙏🏽