chakra-ui-vue
chakra-ui-vue copied to clipboard
CTabPanel catch change event on blur of sub-components (Input,CInput, etc.)
Describe the bug A clear and concise description of what the bug is.
When we use input
(native tag), c-input
(Chakra UI tags), etc. that have emit change
event, this event is caught by the ancestor CTabs
when input loss the focus (onBlur).
To Reproduce Steps to reproduce the behavior:
- Go to: https://codesandbox.io/s/chakra-ui-nuxt-demo-forked-5zbx3?file=/pages/index.vue
- Click set the value of a fields in a tab
- blur the input
- See error,
Tab value: [object Event]
stacktrace:
[Vue warn]: Invalid prop: type check failed for prop "index". Expected Number with value NaN, got Event
found in
---> <CTabs>
<App> at pages/index.vue
<Nuxt>
<CBox>
<CColorModeProvider>
<CThemeProvider>
<App> at layouts/default.vue
<Root>
Expected behavior
Tabs should only handle events of CTabPanels
, not his descendants.
Desktop (please complete the following information):
- OS: macOS
- Browser: all
Hey @Heziode !
Thanks for capturing this issue. Appreciate the reproduction as well. Will be helpful when debugging the issue