Merge pull request #491 from chakra-ui/fix/textarea-event-error

fix: textarea event error

Author: codebender828

.changeset/tender-olives-stare.md

@@ -0,0 +1,8 @@
+---
+'@chakra-ui/vue': patch
+'@chakra-ui/nuxt': patch
+'@chakra-ui/theme-vue': patch
+'chakra-ui-docs': patch
+---
+
+Fixes change event lsitener

packages/chakra-ui-core/src/CTextarea/CTextarea.js

@@ -62,26 +62,34 @@ const CTextarea = {
     const nonNativeEvents = {
       input: (value, $e) => {
         const emitChange = listeners.change
+
         if (emitChange && $e instanceof Event) {
-          emitChange(value, $e)
+          if (typeof emitChange === 'function') {
+            return emitChange(value, $e)
+          }
+          emitChange.forEach(listener => listener(value, $e))
         }
       }
     }
     const { nonNative } = extractListeners({ listeners }, nonNativeEvents)
 
-    return h(CInput, {
-      ...rest,
-      props: {
-        ...forwardProps(props),
-        as: 'textarea'
-      },
-      attrs: {
-        ...defaultStyles,
-        ...(data.attrs || {}),
-        'data-chakra-component': 'CTextarea'
+    return h(
+      CInput,
+      {
+        ...rest,
+        props: {
+          ...forwardProps(props),
+          as: 'textarea'
+        },
+        attrs: {
+          ...defaultStyles,
+          ...(data.attrs || {}),
+          'data-chakra-component': 'CTextarea'
+        },
+        on: nonNative
       },
-      on: nonNative
-    }, slots().default)
+      slots().default
+    )
   }
 }
 

packages/chakra-ui-core/src/CTextarea/CTextarea.stories.js

@@ -14,6 +14,7 @@ storiesOf('UI | Textarea', module)
           mt="2"
           placeholder="Here is a sample placeholder"
           size="md"
+          @change="handleChange"
           :value="textareaContent"
         />
       </CBox>
@@ -27,3 +28,31 @@ storiesOf('UI | Textarea', module)
       action: action()
     }
   }))
+  .add('Basic Usage with Event', () => ({
+    components: { CBox, CTextarea },
+    template: `
+      <CBox w="300px">
+        <CTextarea
+          v-model="textareaContent"
+          maxWidth="sm"
+          mx="auto"
+          mt="2"
+          placeholder="Here is a sample placeholder"
+          size="md"
+          :value="textareaContent"
+          @change="handleChange"
+        />
+      </CBox>
+    `,
+    data () {
+      return {
+        textareaContent: 'Jonathan Bakebwa is awesome'
+      }
+    },
+    methods: {
+      action: action(),
+      handleChange (e) {
+        this.textareaContent = 'You are beautiful :)'
+      }
+    }
+  }))