diff --git a/.changeset/tender-olives-stare.md b/.changeset/tender-olives-stare.md new file mode 100644 index 00000000..3a657b35 --- /dev/null +++ b/.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 diff --git a/packages/chakra-ui-core/src/CTextarea/CTextarea.js b/packages/chakra-ui-core/src/CTextarea/CTextarea.js index d2e68a4c..c491a67d 100644 --- a/packages/chakra-ui-core/src/CTextarea/CTextarea.js +++ b/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 + ) } } diff --git a/packages/chakra-ui-core/src/CTextarea/CTextarea.stories.js b/packages/chakra-ui-core/src/CTextarea/CTextarea.stories.js index 779cd189..0f0aaf32 100644 --- a/packages/chakra-ui-core/src/CTextarea/CTextarea.stories.js +++ b/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" /> @@ -27,3 +28,31 @@ storiesOf('UI | Textarea', module) action: action() } })) + .add('Basic Usage with Event', () => ({ + components: { CBox, CTextarea }, + template: ` + + + + `, + data () { + return { + textareaContent: 'Jonathan Bakebwa is awesome' + } + }, + methods: { + action: action(), + handleChange (e) { + this.textareaContent = 'You are beautiful :)' + } + } + }))