chakra-ui-vue icon indicating copy to clipboard operation
chakra-ui-vue copied to clipboard

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

Open Heziode opened this issue 3 years ago • 1 comments

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):

  • OS: macOS
  • Browser: all

Heziode avatar Feb 06 '21 09:02 Heziode

Hey @Heziode !

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

codebender828 avatar Mar 14 '21 11:03 codebender828