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

CTabPanel catch change event on blur of sub-components (Input,CInput, etc.) #387

Open Heziode opened 3 years ago

Heziode commented 3 years ago

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:

  1. Go to: https://codesandbox.io/s/chakra-ui-nuxt-demo-forked-5zbx3?file=/pages/index.vue
  2. Click set the value of a fields in a tab
  3. blur the input
  4. 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):

codebender828 commented 3 years ago

Hey @Heziode !

Thanks for capturing this issue. Appreciate the reproduction as well. Will be helpful when debugging the issue